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

解決方法

オリジンの cross-origin resource sharing (CORS) ポリシーで、オリジンが「Access-Control-Allow-Origin」ヘッダーを返すことを許可していることを確認します。

注意: AWS コマンドラインインターフェイス (AWS CLI) コマンドの実行中にエラーが発生した場合は、AWS CLI の最新バージョンを使用していることを確認してください。

次のコマンドを実行して、オリジンサーバーが Access-Control-Allow-Origin ヘッダーを返すことを確認します。example.com を必要なオリジンヘッダーに置き換えます。https://www.example.net/video/call/System.generateId.dwr は、ヘッダーエラーを返すリソースの URL に置き換えます。

curl -H "Origin: example.com" -v "https://www.example.net/video/call/System.generateId.dwr"

CORS ポリシーにより、オリジンサーバーが Access-Control-Allow-Origin ヘッダーを返すことを許可している場合、次のような応答が表示されます。

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

応答で CORS ヘッダーが返されない場合、オリジンサーバーは CORS に対して正しく設定されていません。カスタムオリジンまたはAmazon Simple Storage Service (Amazon S3) オリジンに CORS ポリシーを設定します。

適切なヘッダーをオリジンサーバーに転送するように CloudFront ディストリビューションを設定する

オリジンサーバーで CORS ポリシーを設定したら、オリジンヘッダーをオリジンサーバーに転送するように CloudFront ディストリビューションを設定します。オリジンサーバーが Amazon S3 バケットである場合は、通常、次のヘッダーを Amazon S3 に転送するようにディストリビューションを設定する必要があります。

• Access-Control-Request-Headers
• Access-Control-Request-Method
• Origin

ヘッダーをオリジンサーバーに転送するために、CloudFront にはオリジンタイプに応じて、CORS-S3Origin とCORS-CustomOrigin の 2 つの定義済みポリシーがあります。

定義済みのポリシーをディストリビューションに追加するには:

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

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

1. キャッシュポリシーを作成する。
2. [Cache key settings] (キャッシュキーの設定) の下にある [Headers] (ヘッダー) で、[Include the following headers] (次のヘッダーを含める) を選択します。[Add header] (ヘッダーを追加) ドロップダウンリストから、オリジンが必要とするヘッダーの 1 つを選択します。
3. ポリシーをアタッチする動作の要求に応じて、キャッシュポリシー設定を入力します。
4. CloudFront ディストリビューションの動作にキャッシュポリシーをアタッチします。

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

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

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

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

CORS ポリシーを更新して適切なヘッダーを転送してもエラーが表示される場合は、ディストリビューションのキャッシュ動作で OPTIONS HTTP メソッドを許可します。デフォルトでは、CloudFront は GET メソッドと HEAD メソッドのみを許可します。ただし、一部のウェブブラウザでは OPTIONS メソッドのリクエストを発行できます。CloudFront ディストリビューションで OPTIONS メソッドを有効にするには、次の手順に従います。

1. CloudFront コンソールからディストリビューションを開きます。
2. [Behaviors] (動作) タブを選択します。
3. [Create Behavior] (動作を作成) を選択します。または、既存の動作を選択し、[Edit] (編集) を選択します。
4. [Allowed HTTP Methods] (許可される HTTP メソッド) で、[GET, HEAD, OPTIONS] を選択します。
5. [Create Behavior] (動作を作成) を選択します。または、既存の動作を編集している場合は [Save changes] (変更を保存) を選択します。

必要な Access-Control-Allow-Origin ヘッダーを返すように CloudFront レスポンスポリシーを設定する

オリジンサーバーにアクセスできない場合、または適切な CORS ヘッダーを返すように設定できない場合は、必要な CORS ヘッダーを返すように CloudFront を設定します。設定するには、応答ヘッダーポリシーを作成します。

1. CloudFront コンソールからディストリビューションを開きます。
2. [Behaviors] (動作) タブを選択します。
3. [Create Behavior] (動作を作成) を選択します。または、既存の動作を選択し、[Edit] (編集) を選択します。
4. レスポンスヘッダーポリシーの場合:
   ドロップダウンリストから既存のレスポンスポリシーを選択します。

• または -
  [Create policy] (ポリシーを作成) を選択して、新しいレスポンスヘッダーポリシーを作成します。新しいポリシーの [クロスオリジンリソース共有] で、[CORS] をオンにします。

5. 必要に応じて他の設定を入力し、[Create policy] (ポリシーを作成) を選択します。
6. [Create Behavior] (動作を作成) ページで、作成したポリシーをドロップダウンリストから選択します。
7. [Create Behavior] (動作を作成) を選択します。または、既存の動作を編集している場合は [Save changes] (変更を保存) を選択します。

注意: CloudFront は通常、5 分以内にディストリビューションに変更をデプロイします。ディストリビューションを編集したら、キャッシュを無効にして以前にキャッシュされた応答をクリアします。

---

関連情報

CORS 設定を優先させるように CloudFront を設定する

クロスオリジンリソース共有 (CORS) 設定

マネージドレスポンスヘッダーポリシーの使用

クロスオリジンリソース共有 (CORS) ヘッダーをレスポンスに追加する