CloudFront の「リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません」というエラーを解決する方法を教えてください。
最終更新日: 2021 年 1 月 19 日
Amazon CloudFront ディストリビューションのオリジンヘッダーを転送しているのですが、「リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません」というエラーが表示されます。 このエラーの解決方法を教えてください。
簡単な説明
エラー「No 'Access-Control-Allow-Origin' header is present on the requested resource」というエラーを回避するには、次の点を確認します。
- オリジンの cross-origin resource sharing (CORS) ポリシーで、オリジンが「Access-Control-Allow-Origin」ヘッダーを返すことを許可している。
- CloudFront ディストリビューションで、適切なヘッダーが転送されている。
- CloudFront ディストリビューションのキャッシュ動作が HTTP リクエストに対して OPTIONS メソッドを許可している。
解決方法
オリジンの CORS ポリシーで、オリジンが「Access-Control-Allow-Origin」ヘッダーを返すことを許可している
次のような curl コマンドを実行して、オリジンが「Access-Control-Allow-Origin」ヘッダーを返すかどうかを確認します。
curl -H "origin: example.com" -v "https://www.anything.net/video/call/System.generateId.dwr"
CORS ポリシーでオリジンがヘッダーを返すことを許可されている場合、コマンドが次のようなメッセージを返します。
HTTP/1.1 200 OK
Server: nginx/1.10.2
Date: Mon, 01 May 2018 03:06:41 GMT
Content-Type: text/html
Content-Length: 3770
Last-Modified: Thu, 16 Mar 2017 01:50:52 GMT
Connection: keep-alive
ETag: "58c9ef7c-eba"
Access-Control-Allow-Origin:
example.com
Accept-Ranges: bytes
NGINX にあるオリジンの CORS ポリシーを更新するには、CORS on NGINX の手順をご参照ください。Amazon Simple Storage Service (Amazon S3) バケットであるオリジンのポリシーを更新するには、クロスオリジンソース共有 (CORS) の有効化の手順をご参照ください。
CloudFront ディストリビューションで、適切なヘッダーが転送されている
オリジンに CORS を設定した後、オリジンに必要なヘッダーを転送するように CloudFront ディストリビューションを設定します。オリジンが S3 バケットである場合は、通常、次のヘッダーを Amazon S3 に転送するように配信を設定する必要があります。
- Access-Control-Request-Headers
- Access-Control-Request-Method
- Origin
キャッシュポリシーを使用してヘッダーを転送するには、次の手順を実行します。
- CloudFront コンソールを使用してキャッシュポリシーを作成する手順に従います。
- [Cache key contents] (キャッシュキーの内容) の [Headers] (ヘッダー) で、[Whitelist] (ホワイトリスト) を選択します。ヘッダーのリストから、オリジンで必要なヘッダーの 1 つを選択します。[Add header] (ヘッダーの追加) をクリックします。オリジンで必要なすべてのヘッダーについて、この手順を繰り返します。
- ポリシーをアタッチする動作の要件に基づいて、キャッシュポリシーの他のすべての設定を完了します。
- CloudFront ディストリビューションの関連する動作にキャッシュポリシーをアタッチする手順に従います。
従来のキャッシュ設定を使用してヘッダーを転送するには、次の手順を実行します。
- CloudFront コンソールからディストリビューションを開きます。
- [Behaviors] (動作) タブを選択します。
- [Create Behavior] (動作を作成) か既存の動作を選択してから、[Edit] (編集) をクリックします。
- [Cache and origin request settings] (キャッシュとオリジンリクエストの設定) で、[Use legacy cache settings] (従来のキャッシュ設定を使用) を選択します。
- [Cache Based on Selected Request Headers] (選択されたリクエストヘッダーに基づいたキャッシュ) で、[Whitelist] (ホワイトリスト) を選択します。
- [Whitelist Headers] (ホワイトリストヘッダー) で、左側のメニューからオリジンで必要なヘッダーを選択します。その後、[Add] (追加) をクリックします。
- [Yes, Edit] (はい、編集します) を選択します。
注: クライアントリクエストの一部としてヘッダーも CloudFront に転送してください。それを、CloudFront はオリジンに転送します。
CloudFront ディストリビューションのキャッシュ動作が HTTP リクエストに対して OPTIONS メソッドを許可している
CORS ポリシーを更新し、適切なヘッダーを転送した後でもまだエラーが発生する場合は、ディストリビューションのキャッシュ動作で OPTIONS HTTP メソッドの許可を試してみてください。デフォルトでは、CloudFront は GET メソッドおよび HEAD メソッドのみを許可しますが、ウェブブラウザによっては OPTIONS メソッドに対するリクエストを発行する場合があります。
CloudFront ディストリビューションで OPTIONS メソッドを有効にするには、次の手順に従います。
- CloudFront コンソールからディストリビューションを開きます。
- [Behaviors] (動作) タブを選択します。
- [Create Behavior] (動作を作成) か既存の動作を選択してから、[Edit] (編集) をクリックします。
- [Allowed HTTP Methods] (許可される HTTP メソッド) で、[GET, HEAD, OPTIONS] を選択します。
- [Yes, Edit] (はい、編集します) を選択します。
注: CloudFront は通常、5 分以内にディストリビューションに変更をデプロイします。ディストリビューションに変更を加えた後は、キャッシュを無効化することをご検討ください。無効化しない場合は、以前にキャッシュされた応答が返される可能性があります。