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

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

重要

特に 全ての オリジンからのコードのリクエストを許可する場合、安全保護のため、ほかのオリジンにアクセスして欲しいサブリソースがサーバーにある場合のみに CORS を有効化することをお勧めします。

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

  1. Fastly コントロールパネルにログインします。
  2. Home ページから、適切なサービスを選択します。検索ボックスで 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

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

1Access-Control-Allow-Origin: http://example.tld
2Access-Control-Allow-Methods: GET
3Access-Control-Expose-Headers: Content-Length, Connection, Date...
ヒント

Access-Control-Allow-MethodsAccess-Control-Expose-Headers は CORS で追加できる追加ヘッダーの例です。これらのヘッダーの詳細については、MDN Web Docs をご覧ください。


翻訳についての注意事項
このガイドは役に立ちましたか?

このフォームを使用して機密性の高い情報を送信しないでください。サポートが必要な場合はお問い合わせください : support@fastly.com