CloudFront から「リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません」というエラーを解決するにはどうすればよいですか?

最終更新日: 2021 年 9 月 14 日

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

S3 または Custom Origin のいずれかのために CORS を有効にするには、必要なヘッダーをオリジンに渡す必要があります。CloudFront には、使用されるオリジンのタイプに応じて、CORS-S3Origin および CORS-CustomOrigin という 2 つの事前定義されたポリシーがあります。これらのポリシーをディストリビューションに追加するには、次の手順に従います。

CloudFront コンソールからディストリビューションを開きます。
[Behaviors] (動作) タブを選択します。
[Create Behavior] (動作を作成) を選択します。または、既存の動作を選択し、[Edit] (編集) を選択します。
[Cache key and origin requests] (キャッシュキーとオリジンリクエスト) で、[Cache policy and origin request policy] (キャッシュポリシーとオリジンリクエストポリシー) を選択します。その後、[Origin request policy] (オリジンリクエストポリシー) で、ドロップダウンリストから [CORS-S3Origin] または [CORS-CustomOrigin] を選択します。詳細については、管理オリジンリクエストポリシーの使用を参照してください。
注: 代わりに独自のキャッシュポリシーを作成するには、次のセクションを参照してください。
[Save Changes] (変更を保存) を選択します。動作を作成する場合は、[Create Behavior] (動作を作成) を選択します。

オリジンリクエストポリシーを使用してヘッダーを転送するには、次の手順に従います。

CloudFront コンソールを使用してキャッシュポリシーを作成する手順に従います。
[Cache key settings] (キャッシュキーの設定) の下にある [Headers] (ヘッダー) で、[Include the following headers] (次のヘッダーを含める) を選択します。[Add header] (ヘッダーを追加) ドロップダウンリストから、オリジンが必要とするヘッダーの 1 つを選択します。
ポリシーをアタッチする動作の要件に基づいて、キャッシュポリシーの他のすべての設定を完了します。
CloudFront ディストリビューションの関連する動作にキャッシュポリシーをアタッチする手順に従います。

従来のキャッシュ設定を使用してヘッダーを転送するには、次の手順を実行します。

CloudFront コンソールからディストリビューションを開きます。
[Behaviors] (動作) タブを選択します。
[Create Behavior] (動作を作成) を選択します。または、既存の動作を選択し、[Edit] (編集) を選択します。
[Cache key and origin requests] (キャッシュキーとオリジンリクエスト) で、[Legacy cache settings] (レガシーキャッシュ設定) を選択します。
[Headers] (ヘッダー) ドロップダウンリストで、オリジンが必要とするヘッダーを選択します。必要に応じて、[Add custom] (カスタムを追加) を選択し、ドロップダウンリストにないオリジンが必要とするヘッダーを追加します。
[Save Changes] (変更を保存) を選択します。動作を作成する場合は、[Create Behavior] (動作を作成) を選択します。

注: クライアントリクエストの一部としてヘッダーも 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] を選択します。
[Save Changes] (変更を保存) を選択します。動作を作成する場合は、[Create Behavior] (動作を作成) を選択します。

注: CloudFront は通常、5 分以内にディストリビューションに変更をデプロイします。ディストリビューションを編集した後は、キャッシュを無効化することを検討してください。無効化しない場合は、以前にキャッシュされた応答が返される可能性があります。