CloudFront からの「No 'Access-Control-Allow-Origin' header is present on the requested resource」というエラーを解決する方法を教えてください。

エラー「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 ディストリビューションからヘッダーを転送するには、次の手順に従います。

1. CloudFront コンソールからディストリビューションを開きます。
2. [Behaviors] タブをクリックします。
3. [Create Behavior] か既存の動作を選択してから、[Edit] をクリックします。
4. 選択した要求ヘッダーに基づくキャッシュの場合は、[Whitelist] を選択します。
5. [Whitelist Headers] の下の左側のメニューからヘッダーを選択し、[Add] をクリックします。
6. [Yes, Edit] をクリックします。

注意: クライアントリクエストの一部としてヘッダーも CloudFront に転送してください。それを、CloudFront はオリジンに転送します。

CloudFront ディストリビューションのキャッシュ動作が HTTP リクエストに対して OPTIONS メソッドを許可している

CORS ポリシーを更新し、適切なヘッダーを転送した後でもまだエラーが発生する場合は、ディストリビューションのキャッシュ動作で OPTIONS HTTP メソッドの許可を試してみてください。デフォルトでは、CloudFront は GET メソッドおよび HEAD メソッドのみを許可しますが、ウェブブラウザによっては OPTIONS メソッドに対するリクエストを発行する場合があります。

CloudFront ディストリビューションで OPTIONS メソッドを有効にするには、次の手順に従います。

1. CloudFront コンソールからディストリビューションを開きます。
2. [Behaviors] タブをクリックします。
3. [Create Behavior] か既存の動作を選択してから、[Edit] をクリックします。
4. [Allowed HTTP Methods] で、[GET]、[HEAD]、[OPTIONS] を選択します。
5. [Yes, Edit] をクリックします。

注意: CloudFront は通常、5 分以内にディストリビューションに変更をデプロイします。