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

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

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

  1. Fastly コントロールパネルにログインします。
  2. All services ページから、該当するサービスを選択します。検索ボックスを使用して ID、名前、またはドメインで検索することができます。
  3. Edit configuration ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。ドメインページが表示されます。
  4. Content をクリックします。Content ページが表示されます。
  5. Create header ボタンをクリックしてください。Create a header ページが表示されます。

    Custom CORs のヘッダー

  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 コマンドを実行すると、ヘッダーに以下のような情報が含まれる必要があります。

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