クロスオリジンリクエストは、あるオリジン（例: a.example.com）の Web ページが、別のオリジン（例: b.secondexample.com）のリソースを要求するときに発生します。クロスオリジンリソース共有（CORS）は HTTP ヘッダーを使い、b.secondexample.com のサーバーが a.example.com にリソースへのアクセスを許可するかどうかを示す仕組みです。ブラウザーはこれらのヘッダーを適用し、許可されていないレスポンスへのアクセスをブロックします。
Cloudflare は次の方法で CORS をサポートします。
Hostヘッダー、Originヘッダー、URL パス、クエリでキャッシュ済みアセットを識別します。同じHostヘッダーでも、Originヘッダーが異なるリソースを区別できます。- オリジンサーバーからブラウザーへ
Access-Control-Allow-Originヘッダーをそのまま渡します。
Access-Control-Allow-Origin ヘッダーは、サーバーが外部オリジンとリソースを共有するためのルールを指定します。サーバーは、リクエストの Origin ヘッダーに応じて、異なる Access-Control-Allow-Origin 値を返すことがあります。これらのヘッダーは、キャッシュ対象のコンテンツ によく付いています。
オリジンの Web サーバーで CORS の設定を追加または変更しても、URL 単位の Cloudflare キャッシュパージでは CORS ヘッダーは更新されません。新しい CORS ヘッダーを Cloudflare に取得させるには、次のいずれかを使います。
- ファイル名または URL を変えてキャッシュをバイパスし、最新の CORS ヘッダーを取得させます。
- 単一ファイルパージ API で、パージリクエストに適切な CORS ヘッダーを指定します。
- オリジンの Web サーバーでリソースの最終更新時刻を更新します。そのあと フルパージ を実行し、更新済み CORS ヘッダーを含む最新版のアセットを取得します。
Cloudflare の製品で CORS ヘッダーを設定するには、次のいずれかの方法を使います。
- Worker を使う: 例は CORS header proxy を参照してください。
- Snippet を設定する: 例は Define CORS headers を参照してください。
- Transform Rules を使う: 例は Add a wildcard CORS response header を参照してください。