コンテンツにスキップ

CORSの設定

クロスオリジンリソースシェアリング (CORS) ↗ は、ドメインXがドメインYのリソースにアクセスするのを防ぐ標準化された方法です。これは、ドメインYからのHTTPレスポンスに特別なヘッダーを使用することで行われ、ブラウザがドメインYがドメインXにこれらのリソースへのアクセスを許可していることを確認できるようにします。

CORSは悪意のあるウェブサイトからデータを保護するのに役立ちますが、CORSはバケット内のオブジェクトと対話し、バケットのポリシーを設定するためにも使用されます。

CORSはウェブブラウザからバケットと対話する際に使用され、2つのオプションがあります。

バケットを公開に設定する: このオプションは、バケットをインターネット上で読み取り専用としてアクセス可能にします。つまり、誰でもブラウザや他の場所からバケット内のオブジェクトをリクエストして読み込むことができます。このオプションは、バケットに公開ブログで使用される画像が含まれている場合に理想的です。

プレサインドURL: ユニークなURLにアクセスできる誰でも、バケット内で特定のアクションを実行できるようにします。

前提条件

CORSを設定する前に、次のものが必要です。

  • 少なくとも1つのオブジェクトを持つR2バケット。バケットを作成する必要がある場合は、公開バケットの作成を参照してください。
  • オブジェクトにアクセスするために使用できるドメイン。これもlocalhostである可能性があります。
  • （オプション）アクセスキー。プレサインドURLを作成する際にのみアクセスキーが必要です。

公開バケットでCORSを使用する

公開バケットでCORSを使用するには、バケットが公開アクセスを許可するように設定されていることを確認してください。

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

プレサインドURLでCORSを使用する

プレサインドURLは、GetObjectやPutObjectなどのS3アクションの詳細をエンコードする特別な署名を含むS3の概念です。プレサインドURLは認証のためにのみ使用されるため、一般的に秘密を明らかにすることなく公開配布するのは安全です。

プレサインドURLの作成

プレサインドURLを生成する際に使用するS3互換の資格情報のペアが必要です。

以下の例は、JavaScriptの@aws-sdk/client-s3 ↗パッケージを使用してプレサインドPutObjectURLを生成する方法を示しています。

import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
const S3 = new S3Client({
  endpoint: "https://4893d737c0b9e484dfc37ec392b5fa8a.r2.cloudflarestorage.com",
  credentials: {
    accessKeyId: "7dc27c125a22ad808cd01df8ec309d41",
    secretAccessKey:
      "1aa5c5b0c43defdb88f567487c071d17e234126133444770a706ae09336c57a4",
  },
  region: "auto",
});
const url = await getSignedUrl(
  S3,
  new PutObjectCommand({
    Bucket: bucket,
    Key: object,
  }),
  {
    expiresIn: 60 * 60 * 24 * 7, // 7d
  },
);
console.log(url);

プレサインドURLのテスト

cURLを使用してオブジェクトをアップロードすることで、プレサインドURLをテストします。以下の例では、123というテキストをContent-Typeがtext/plainのR2にアップロードします。

Terminal window
curl --request PUT <URL> --header "Content-Type: text/plain" --data "123"

ダッシュボードからCORSポリシーを追加する

  1. CloudflareダッシュボードからR2を選択します。
  2. リストからバケットを見つけて選択します。
  3. バケットのページから設定を選択します。
  4. CORSポリシーの下で、CORSポリシーを追加を選択します。
  5. JSONタブから、ポリシーを手動で入力するか、コピー＆ペーストしてテキストボックスに貼り付けます。
  6. 完了したら、保存を選択します。

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

レスポンスヘッダー

R2 CORSポリシーの以下のフィールドは、HTTPレスポンスヘッダーにマッピングされます。これらのレスポンスヘッダーは、受信したHTTPリクエストが有効なCORSリクエストである場合にのみ返されます。

フィールド名説明例
AllowedOriginsブラウザからバケット内のオブジェクトをリクエストする際にR2が設定するAccess-Control-Allow-Originヘッダーの値を指定します。www.test.comのウェブサイトがstatic.example.comのカスタムドメイン上のリソース（例：フォント、スクリプト）にアクセスする必要がある場合、https://www.test.comをAllowedOriginとして設定します。
AllowedMethodsブラウザからバケット内のオブジェクトをリクエストする際にR2が設定するAccess-Control-Allow-Methodsヘッダーの値を指定します。GET, POST, PUT
AllowedHeadersこのバケットからブラウザにオブジェクトをリクエストする際にR2が設定するAccess-Control-Allow-Headersヘッダーの値を指定します。カスタムヘッダー（例：x-user-id）を含むクロスオリジンリクエストは、これらのヘッダーをAllowedHeadersとして指定する必要があります。x-requested-by, User-Agent
ExposeHeadersクロスオリジンリクエストを行うJavaScriptによってアクセスできるように、返されるヘッダーを指定します。Content-Encodingやcf-cache-statusなど、安全リストに載っているレスポンスヘッダー ↗を超えてヘッダーにアクセスする必要がある場合は、ここに指定する必要があります。Content-Encoding, cf-cache-status, Date
MaxAgeSecondsブラウザがCORSプレフライトレスポンスをキャッシュできる時間（秒単位）を指定します。ブラウザは、最大値（86400）が指定されていても、これを2時間以下に制限する場合があります。3600

例

この例は、フォントファイルであるRoboto-Light.ttfオブジェクトを含むバケットに追加されたCORSポリシーを示しています。

AllowedOriginsは使用されるウェブサーバーを指定し、localhost:3000はウェブサーバーが実行されているホスト名です。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レスポンスヘッダーを返しません。オリジンの値は正確に一致する必要があります。
  • 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を正しく設定し、JavaScriptがアクセスする必要のあるヘッダー（例：Content-Length）を含めるようにしてください。
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings