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

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

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

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

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

   

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

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