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

解決策

オリジンのクロスオリジンリソースシェアリング (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 シンプルストレージサービス (Amazon S3) オリジンに CORS ポリシーを設定します。

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

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

• アクセス制御要求ヘッダー
• アクセス制御リクエストメソッド
• オリジン

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

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

1. CloudFront コンソールからディストリビューションを開きます。
2. [動作] タブを選択します。
3. **[動作を作成]を選択します。または、既存の動作を選択して、[編集]**を選択します。
4. [キャッシュキーとオリジンリクエスト] で、**キャッシュポリシーとオリジンリクエストポリシーを選択します。**次に、オリジンリクエストポリシーに、ドロップダウンリストから CORS-S3Origin または CORS-CustomOrigin を選択します。詳細については、「マネージドオリジンリクエストポリシーの使用」を参照してください。
   注: 代わりに独自のキャッシュポリシーを作成する場合は、「キャッシュポリシーの作成」を参照してください。
5. **[動作を作成] を選択します。**または、既存の動作を編集する場合は [変更を保存] を選択します。

キャッシュポリシーを使用してヘッダーを転送するには:

1. キャッシュポリシーを作成します。
2. [キャッシュキー設定] の下にある**[ヘッダー]** で、[次のヘッダーを含める]を選択します。[ヘッダーを追加] ドロップダウンリストから、オリジンに必要なヘッダーを 1 つ選択します。
3. ポリシーをアタッチする動作に必要なキャッシュポリシー設定を入力します。
4. CloudFront ディストリビューションの動作にキャッシュポリシーをアタッチします。

レガシーキャッシュ設定を使用してヘッダーを転送するには:

1. CloudFront コンソールからディストリビューションを開きます。
2. [動作] タブを選択します。
3. **[動作を作成]を選択します。または、既存の動作を選択して、[編集]**を選択します。
4. [キャッシュキーとオリジンリクエスト] で、**[レガシーキャッシュ設定]**を選択します。
5. [ヘッダー] ドロップダウンリストで、オリジンに必要なヘッダーを選択します。ドロップダウンリストに表示されないオリジンに必要なヘッダーを追加するには、[カスタムを追加] を選択します。
6. **[動作を作成]**を選択します。または、既存の動作を編集する場合は [変更を保存] を選択します。

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

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

CORS ポリシーを更新して該当するヘッダーを転送してもエラーが表示される場合は、ディストリビューションのキャッシュ動作で OPTIONS HTTP メソッドを許可してください。デフォルトでは、CloudFront は GET メソッドと HEAD メソッドのみを許可します。ただし、Web ブラウザによっては OPTIONS メソッドのリクエストを発行できます。CloudFront ディストリビューションでオプションメソッドを有効にするには:

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

必要なアクセスコントロールオリジン許可ヘッダーを返すように CloudFront レスポンスポリシーを設定する

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

1. CloudFront コンソールからディストリビューションを開きます。
2. [動作] タブを選択します。
3. **[動作を作成]を選択します。または、既存の動作を選択して、[編集]**を選択します。
4. レスポンスヘッダーポリシーの場合:
   ドロップダウンリストから既存のレスポンスポリシーを選択します。
   -or-
   [ポリシーの作成] を選択して、新しいレスポンスヘッダーポリシーを作成します。新しいポリシーの [クロスオリジンリソースシェアリング] で CORS を有効にします。
5. 必要に応じて他の設定を入力し、**[ポリシーの作成]**を選択します。
6. [動作を作成] ページから、作成したポリシーをドロップダウンリストから選択します。
7. **[動作を作成]**を選択します。または、既存の動作を編集する場合は [変更を保存] を選択します。

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

関連情報

CORS 設定を遵守するための CloudFront の設定

クロスオリジンリソースシェアリング (CORS) の設定

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

クロスオリジンリソースシェアリング (CORS) ヘッダーをレスポンスに追加する