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

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

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

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

Custom CORs のヘッダー

  1. 以下の要領では、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 フィールドは、デフォルト値のままにします。
  2. Create ボタンをクリックします。Content ページに新しいヘッダーが表示されます。
  3. Activate ボタンをクリックして設定変更をデプロイします。

テストする

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

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

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

1
2
3
Access-Control-Allow-Origin: http://example.tld
Access-Control-Allow-Methods: GET
Access-Control-Expose-Headers: Content-Length, Connection, Date...
Back to Top