1. Home
  2. Guides
  3. Full-Site Delivery
  4. ヘッダー

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

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

特に全てのオリジンからのコードのリクエストを許可する場合、安全保護のため、ほかのオリジンにアクセスして欲しいサブリソースがサーバーにある場合のみに CORS を有効化することをお勧めします。

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

  1. Fastly コントロールパネルにログインします。

  2. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。

  3. Edit configuration をクリックし、アクティブなバージョンをクローンするオプションを選択します。

  4. Content をクリックします。

  5. Create header をクリックします。

    カスタム CORS ヘッダー

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

このコントロールの場合任意のオリジンのヘッダーを作成するとき特定のオリジンのヘッダーを作成するとき
Name新しいヘッダーを表す、わかりやすい名前を入力します。(例: CORS S3 Allow)。新しいヘッダーを表す、わかりやすい名前を入力します。(例: CORS S3 Allow)。
TypeCache を選択します。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 を生成します。

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

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

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

テストする

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

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

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

Access-Control-Allow-Origin: http://example.tld
Access-Control-Allow-Methods: GET
Access-Control-Expose-Headers: Content-Length, Connection, Date...
Access-Control-Allow-Methods と Access-Control-Expose-Headers は CORS で追加できる追加ヘッダーの一例です。これらのヘッダーの詳細については、MDN Web Docs を確認してください。
Fastly
© Fastly 2025