クロスオリジン・リソース・シェアリング (CORS) を有効にする

クロスオリジン・リソース・シェアリング (CORS) を有効にすることで、他のオリジンがサーバーからスクリプトやスタイルシートなどのサブリソースをリクエストできることを示すことができます。これらのオリジンは、異なるスキーム (HTTP または HTTPS) やドメイン、またはポートを使用する可能性があります。このガイドでは、シンプルなシナリオで有効な Access-Control-Allow-Origin ヘッダーの追加方法を説明します。このヘッダーは、Amazon S3Google Cloud Storage などの静的バケットのプロバイダーをオリジンとして使用する場合に便利です。

重要

特に 全ての オリジンからのコードのリクエストを許可する場合には、安全性が低下するため、ほかのオリジンが読み込む必要のあるサブリソースがサーバーにある場合のみに CORS を有効化することをお勧めします。

CORS を有効化するには、以下の手順に従ってカスタム HTTP ヘッダーを設定します。

  1. Fastly コントロールパネルにログインします。
  2. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。
  3. Edit configuration をクリックし、アクティブなバージョンをクローンするオプションを選択します。
  4. Content をクリックします。
  5. Create header をクリックします。

    Custom CORS のヘッダー

  6. Create a header コントロールで以下の操作を実行します。すべてのオリジンのヘッダーを作成しているか、特定のオリジンのヘッダーを作成しているかによって、操作方法は変わります。

    このコントロールの場合任意のオリジンのヘッダーを作成するとき特定のオリジンのヘッダーを作成するとき
    Name新しいヘッダーを表す、わかりやすい名前を入力します。(例: CORS S3 Allow)。新しいヘッダーを表す説明的な名前を入力します。(例: CORS S3 Allow)。
    種類Cache を選択します。Response を選択します。
    ActionSet を選択します。Set を選択します。
    Destinationhttp.Access-Control-Allow-Origin を入力します。http.Access-Control-Allow-Origin を入力します。
    Source"*" を入力します。特定のオリジンを入力します (例: https://example.com)。
    Ignore if set値をデフォルトのままにします。値をデフォルトのままにします。
    Priority値をデフォルトのままにします。値をデフォルトのままにします。

    CORS のルールが vcl_deliver に確実に適用されるよう Source フィールドに単一のオリジンを指定すると、システムは vcl_deliver の下に set resp.http.Access-Control-Allow-Origin = "<specified origin>"; として VCL を生成します。

  7. Create をクリックします。Content ページに新しいヘッダーが表示されます。

  8. Activate をクリックして設定への変更をデプロイします。
重要

すでにキャッシュされたオブジェクトには、パージされるまでこのヘッダーは適用されません。

テストする

以下のコマンドを実行します:

$ curl -I example.tld/path/to/resource

ヘッダーに以下のような情報が含まれる必要があります。

1Access-Control-Allow-Origin: http://example.tld
2Access-Control-Allow-Methods: GET
3Access-Control-Expose-Headers: Content-Length, Connection, Date...
ヒント

Access-Control-Allow-MethodsAccess-Control-Expose-Headers は CORS で追加できる追加ヘッダーの一例です。これらのヘッダーの詳細については、MDN Web Docs を確認してください。


翻訳についての注意事項
このガイドは役に立ちましたか?

このフォームを使用して機密性の高い情報を送信しないでください。サポートが必要な場合は、サポートチームまでご連絡ください。このフォームは reCAPTCHA によって保護されており、Google のプライバシーポリシー利用規約が適用されます。