クロスオリジン・リソース・シェアリング (CORS) を有効にする
最終更新日 2021-02-23
クロスオリジン・リソース・シェアリング (CORS) を有効にすることで、他のオリジンがサーバーからスクリプトやスタイルシートなどのサブリソースをリクエストできることを示すことができます。これらのオリジンは、異なるスキーム (HTTP または HTTPS) やドメイン、またはポートを使用する可能性があります。このガイドでは、シンプルなシナリオで有効な Access-Control-Allow-Origin
ヘッダーの追加方法を説明します。このヘッダーは、Amazon S3 や Google Cloud Storage などの静的バケットのプロバイダーをオリジンとして使用する場合に便利です。
重要
特に 全ての オリジンからのコードのリクエストを許可する場合、安全保護のため、ほかのオリジンにアクセスして欲しいサブリソースがサーバーにある場合のみに CORS を有効化することをお勧めします。
CORS を有効化するには、以下の手順に従ってカスタム HTTP ヘッダーを設定します。
- Fastly コントロールパネルにログインします。
- Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインでの検索が行えます。
- Edit configuration ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。ドメインページが表示されます。
- Content をクリックします。Content ページが表示されます。
Create header ボタンをクリックします。Create a header ページが表示されます。
以下の要領では、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 フィールドは、デフォルト値のままにします。
- Name フィールドに、新しいキャッシュ設定の説明的な名前を入力します (例:
Create ボタンをクリックします。Content ページに新しいヘッダーが表示されます。
- Activate ボタンをクリックして設定変更をデプロイします。
重要
すでにキャッシュされたオブジェクトには、パージされるまでこのヘッダーが適用されません。
テストする
以下のコマンドを実行します:
$ curl -I example.tld/path/to/resource
ヘッダーに以下のような情報が含まれる必要があります。
1Access-Control-Allow-Origin: http://example.tld2Access-Control-Allow-Methods: GET3Access-Control-Expose-Headers: Content-Length, Connection, Date...
ヒント
Access-Control-Allow-Methods
と Access-Control-Expose-Headers
は CORS で追加できる追加ヘッダーの例です。これらのヘッダーの詳細については、MDN Web Docs をご覧ください。