クロスオリジン・リソース・シェアリング (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 コントロールで以下の操作を実行します。すべてのオリジンのヘッダーを作成しているか、特定のオリジンのヘッダーを作成しているかによって、操作方法は変わります。

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...