クロスオリジン・リソース・シェアリング (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 をクリックします。Content ページが表示されます。

5. Create header ボタンをクリックします。Create a header ページが表示されます。

   

6. 以下の要領では、Create a header ページの各フィールドに入力します。

   • Name フィールドに、新しいキャッシュ設定の説明的な名前を入力します (例：CORS S3 Allow)。この名前は Fastly コントロールパネルに表示されます。
   • Type メニューから Cache を選択し、Action メニューから Set を選択します。
   • Destinationフィールドに http.Access-Control-Allow-Origin と入力します。
   • Source フィールドに、"*" を入力することで、あらゆるオリジンまたは指定した単一のオリジンから (https://example.com) コードをリクエストすることができます。オリジンを指定する場合は、vcl_deliver で CORS ルールが適用されていなければいけません。
   • Ignore if is set メニューと、Priority フィールドは、デフォルト値のままにします。

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