CORS を設定する

Cross-Origin Resource Sharing（CORS） ↗ は、ドメイン X がドメイン Y のリソースへアクセスするのを防ぐ標準的な仕組みです。ドメイン Y の HTTP レスポンスに特別なヘッダーを付け、ブラウザーが「ドメイン Y はドメイン X からのアクセスを許可している」と確認できるようにします。

CORS は悪意のあるサイトからデータを守る一方で、バケット内のオブジェクト操作や、バケットのポリシー設定にも使います。

ブラウザーからバケットを操作するときは CORS が必要です。次の 2 つの方法があります。

バケットを公開する: バケットをインターネット上で読み取り専用として公開します。誰でもブラウザーやほかの場所からオブジェクトを取得できます。公開ブログで使う画像を置く場合などに向いています。

Presigned URL: 固有の URL を知っている人だけが、バケットに対して指定した操作を実行できます。

CORS を設定する前に、次を用意します。

• オブジェクトを 1 つ以上入れた R2 バケット。バケットがない場合は 公開バケットを作成する を参照してください。
• オブジェクトへアクセスするためのドメイン。localhost でも構いません。
• （任意）アクセスキー。Presigned URL を作るときだけ必要です。

公開バケットで CORS を使う には、バケットを公開アクセス可能にしておきます。

次に、ファイルを共有できるよう、バケットに CORS ポリシーを追加 します。

Presigned URL を使うと、認証情報を公開せずに、バケットに対する特定の操作を一時的に許可できます。認証は Presigned URL が担いますが、ブラウザーからリクエストする場合は、別途 CORS の設定が必要です。

ブラウザーが別オリジンの Presigned URL へリクエストすると、CORS が適用されます。CORS ポリシーがないと、Presigned URL 自体は有効でも、ブラウザー経由のアップロードとダウンロードは失敗します。

期限切れの Presigned URL は 403 ExpiredRequest を返します。R2 は期限切れの Presigned URL レスポンスに CORS レスポンスヘッダーを付けないため、ブラウザーの JavaScript はエラー本文を読めません。期限切れの前に Presigned URL を更新するか、ブラウザー側で期限切れエラーを直接扱う必要がある場合は、アプリケーションサーバー経由でリクエストします。

Presigned URL でブラウザーからアクセスできるようにする手順は次のとおりです。

1. アプリケーションのオリジンからのリクエストを許可する CORS ポリシーを追加 します。

2. AllowedMethods には、Presigned URL が実行する操作に合わせて GET、PUT、HEAD、DELETE を指定します。

3. AllowedHeaders には、Presigned URL 利用時にクライアントが送るヘッダー（Content-Type、チェックサム、キャッシュ、カスタムメタデータなど）を含めます。

4. （任意）ExposeHeaders を設定すると、JavaScript から ETag などのレスポンスヘッダーを読めます。ETag にはオブジェクトのハッシュが含まれ、アップロードの検証に使えます。

5. （任意）MaxAgeSeconds を設定すると、プリフライトレスポンスをキャッシュし、ブラウザーが送るプリフライトリクエストの回数を減らせます。

次の例は、https://example.com からのブラウザーアップロードを、Content-Type ヘッダー付きで許可します。

[
  {
    "AllowedOrigins": ["https://example.com"],
    "AllowedMethods": ["PUT"],
    "AllowedHeaders": ["Content-Type"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3600
  }
]

CORS ポリシーを付けた R2 バケットに カスタムドメイン を接続すると、クロスオリジンリクエスト ↗ に対して CORS レスポンスヘッダーが自動で返されます。

クロスオリジンリクエストには、有効な Origin リクエストヘッダー（例: Origin: https://example.com）が必要です。直接テストしたり curl などのコマンドラインツールを使ったりする場合、リクエストに Origin ヘッダーを付けないと、CORS の Access-Control-* レスポンスヘッダーは見えません。

1. Cloudflare ダッシュボードで R2 object storage ページを開きます。

   Overview を開く ↗

2. 一覧から対象のバケットを選びます。

3. Settings を選びます。

4. CORS Policy で Add CORS policy を選びます。

5. JSON タブで、ポリシーを手入力するか、コピーしてテキストボックスへ貼り付けます。

6. 完了したら Save を選びます。

ポリシーは、そのバケットの Settings ページに表示されます。

Wrangler CLI で CORS ルールを設定できます。

1. CORS 設定を書いた JSON ファイルを作成します。

{
  "rules": [
    {
      "allowed": {
        "origins": ["https://example.com"],
        "methods": ["GET"]
      }
    }
  ]
}

2. CORS ポリシーをバケットに適用します。

npx wrangler r2 bucket cors set <BUCKET_NAME> --file cors.json

3. CORS ポリシーが適用されたことを確認します。

npx wrangler r2 bucket cors list <BUCKET_NAME>

R2 の CORS ポリシーの各フィールドは、HTTP レスポンスヘッダーに対応します。これらのレスポンスヘッダーは、受信した HTTP リクエストが有効な CORS リクエストのときだけ返されます。

この例は、Roboto-Light.ttf（フォントファイル）を含むバケットに追加した CORS ポリシーです。

AllowedOrigins には利用中の Web サーバーを指定し、localhost:3000 は Web サーバーが動いているホスト名です。AllowedMethods は GET のみを許可し、バケット内のオブジェクトを読み取れます。

[
	{
		"AllowedOrigins": ["http://localhost:3000"],
		"AllowedMethods": ["GET"]
	}
]

一般に、CORS ルールが正しいかを確認するには、ブラウザーがブロックしているネットワークリクエストを見ます。

• ルールの AllowedOrigins に、リクエスト元のオリジン（http://localhost:3000 や https://yourdomain.com など）が含まれていることを確認します。
• ルールの AllowedMethods に、ブロックされたリクエストのメソッドが含まれていることを確認します。
• ルールの AllowedHeaders に、ブロックされたリクエストのヘッダーが含まれていることを確認します。

また、CORS ルールの反映には、まれに最大 30 秒かかることがあります。

• CORS レスポンスヘッダーが付くのは、クロスオリジンリクエストだけです。
  • クロスオリジンリクエストは、Origin HTTP リクエストヘッダーの有無で識別します。Origin の値は、CORS ポリシーの AllowedOrigins で許可された有効なオリジンである必要があります。
  • Origin HTTP リクエストヘッダーがないリクエストには、CORS レスポンスヘッダーは返りません。Origin の値は完全一致である必要があります。
• CORS ポリシーの AllowedOrigins の値は、有効な HTTP Origin ヘッダー値 ↗ である必要があります。有効な Origin ヘッダーにパスは含めません。scheme://host[:port]（ポートは任意）だけです。
  • 有効な AllowedOrigins の値: https://static.example.com — スキームとホストを含みます。ポートは任意で、スキームから暗黙に決まります。
  • 無効な AllowedOrigins の値: https://static.example.com/ や https://static.example.com/fonts/Calibri.woff2 — パスが含まれています。
• 動画プレーヤーを使うときなど、オリジンページの JavaScript から特定のヘッダー値を読む必要がある場合は、Access-Control-Expose-Headers を正しく設定し、Content-Length など JavaScript がアクセスするヘッダーを含めます。