日本語English

CORS Studio

ブラウザが CORS エラーで通さないとき、要求（Origin・メソッド・ヘッダー・認証情報）と応答ヘッダーを入れると、通るか通らないかと理由を、ヘッダーごとに示します。許可する設定の書き方も作れます。

端末内で処理・アップロードなしスマホ対応オフライン対応

ファイルや入力内容はお使いの端末（ブラウザ）の中だけで処理され、サーバーへは送信されません。

要求（ブラウザがページから送るもの）

https://app.example.com の形。サンドボックスの iframe や file:// のときは null。

GET・POST など。

application/json など。空なら送らないものとして扱います。

Authorization・X-Requested-With など。Accept・Accept-Language・Content-Language は安全なので書かなくても構いません。

「HTTP/1.1 204」などの状態行があれば、そこも貼ります。ブラウザの開発者ツールのネットワークで確認できます。

Name: value の行を貼ります。同じ名前が複数あると、ブラウザは「, 」で結合して読みます。

要求の Origin を入れ、必要なら応答のヘッダーを貼ってください。

使い方

  1. 「判定」タブで、ページの Origin、メソッド、リクエストヘッダーの名前、Content-Type の値、認証情報の有無を入れます。

  2. プリフライト（OPTIONS）の応答と、本番の応答（GET などの実際の応答）のヘッダーを貼り付けます。ブラウザの開発者ツールの「ネットワーク」タブからコピーできます。

  3. 「通る」「通らない」と、ヘッダーごとの ✓ ✗ と直し方を確かめます。ヘッダーを貼らないときは、必要な応答の欄が「判定できません」と示します。

  4. 「設定を作る」タブで、許可する Origin・メソッド・ヘッダーを選ぶと、応答ヘッダーと nginx・Apache・Express・Next.js の設定例を出します。

できること

プリフライトが要るかの判定

メソッドが GET・HEAD・POST 以外か、ヘッダーが安全なもの（Accept など）以外か、Content-Type が application/x-www-form-urlencoded・multipart/form-data・text/plain 以外かを、Fetch Standard の定義に沿って見ます。

ヘッダーごとの CORS チェック

Access-Control-Allow-Origin（要求の Origin との一致。スキーム・ポート・ホスト名の違いを分けて説明）、Allow-Credentials、Allow-Methods、Allow-Headers（* の扱いと Authorization の例外）、Expose-Headers、Vary: Origin を、行ごとに判定します。

一般的な失敗の説明

* と認証情報の併用、Origin の末尾のスラッシュ、null の扱い、値が複数ある Allow-Origin、Set-Cookie を Expose-Headers に書いた場合などを、直し方と一緒に示します。

nginx・Apache・Express・Next.js の設定例

許可する Origin を照合して一致したものだけを返す書き方を出します。プリフライトは 204 で返します。Express は cors パッケージを使わない素の書き方です。

こんなときに

  • fetch で「has been blocked by CORS policy」と出て、原因を Access-Control-Allow-Origin から確かめたい
  • JSON を送る POST で、プリフライトが失敗する理由（Content-Type・Authorization）を知りたい
  • 認証情報（Cookie）を付けた要求が、* を返したサーバーで失敗する理由を知りたい
  • 複数のサイトの Origin を許可する書き方を、nginx や Express で作りたい
  • Vary: Origin が必要かを、キャッシュの観点から確かめたい

対応形式

入力

要求の Origin・メソッド・リクエストヘッダーの名前・Content-Type の値プリフライト（OPTIONS）の応答ヘッダー（状態行を含めてもよい）本番の応答ヘッダー（状態行を含めてもよい）

対応状況

機能対応補足
プリフライトが要るかの判定（Fetch Standard の定義）対応—
ヘッダーごとの CORS チェックと直し方対応—
nginx・Apache・Express・Next.js の設定例対応—
URL を入れて実際の応答ヘッダーを取得する非対応ネットワークには接続しません。応答ヘッダーを貼り付けてください
ブラウザの実際の動作を再現する非対応仕様に基づく判定です。ブラウザごとの細かな違いは確かめられません
認証の仕組みや API の中身の検査非対応CORS の応答ヘッダーだけを見ます
ブラウザ以外（curl など）からの要求の制限非対応CORS はブラウザが読み取りを制限する仕組みです

制限・注意事項

  • 判定はヘッダーの内容だけで行います。実際にブラウザでページを開いて確かめたときの結果とは、キャッシュ・拡張機能・ブラウザの版によって差が出ることがあります。
  • プリフライトの結果を使い回す時間（Access-Control-Max-Age）の上限は、ブラウザごとに異なります。このツールは上限の数値を断定しません。
  • 要求の Origin は http・https（または null）だけを受け付けます。応答の Access-Control-Allow-Origin は、文字どおりに要求の Origin と比べます（末尾のスラッシュや大文字・小文字の違いも不一致）。
  • 入力の上限は、1 欄あたり 2 万字、ヘッダーは 1 つの欄に 200 行までです。
  • 設定例のドメインは例です。サーバーの構成（プロキシ・CDN・フレームワーク）によっては、設定する場所が異なります。
  • スマートフォンでも使えますが、長いヘッダーの貼り付けは PC 推奨です。

プライバシーと安全性

貼り付けたヘッダー・Origin・設定は、お使いのブラウザの中だけで処理されます。サーバーへ送信・保存されることはありません。

よくある質問

CORS エラーはなぜ出るのですか？
ブラウザは、ページの Origin と違うサイトの応答を、応答の Access-Control-Allow-Origin などで許可されているときだけ JavaScript に渡します。許可されていないと、サーバーが動いていても CORS エラーになります。
Access-Control-Allow-Origin に * を書いたのに、認証付きで失敗するのはなぜですか？
認証情報（Cookie など）を付けた要求では、* は一致しません。Origin を 1 つずつ返し、Access-Control-Allow-Credentials: true を付けます。
プリフライト（OPTIONS）とは何ですか？
安全でないメソッド（PUT・DELETE など）や、安全でないヘッダー（Authorization など）・安全でない Content-Type（application/json など）を含む要求の前に、ブラウザが送る確認の要求です。許可の応答がないと、本来の要求は送られません。
複数のサイトの Origin を許可するには？
Access-Control-Allow-Origin には 1 つの値しか返せません。要求の Origin を許可リストと照合して、一致したものだけを返し、Vary: Origin を付けます。このツールの「設定を作る」で書き方を確かめられます。
Vary: Origin はなぜ必要ですか？
キャッシュ（CDN やブラウザ）が、Origin ごとに違う応答を区別するための指定です。付けないと、別の Origin 向けの応答が使い回されることがあります。

CSP Studio

CSP のヘッダーや meta タグを貼り付けると、unsafe-inline・unsafe-eval・ワイルドカード・object-src や base-uri の欠落などを重さ（高・中・低）つきで指摘し、改善案を示します。生成と hash 計算もできます。

アップロードなし

Cookie / Set-Cookie Studio

Cookie ヘッダーや Set-Cookie を貼り付けると、属性（Expires・Max-Age・Domain・Path・Secure・HttpOnly・SameSite・Partitioned）を表にし、確認したい点を示します。フォームから Set-Cookie ヘッダーと各言語の書き方も作れます。

アップロードなし

curl解析・コード生成

Chrome や Firefox の「cURL としてコピー」を貼ると、メソッド・URL・ヘッダー・Cookie・本文を表にし、12 種類のコードへ変換します。リクエストは送らず、すべてブラウザの中で処理します。Authorization や Cookie は共有前に伏せられます。

アップロードなし

Cache-Control Studio

Cache-Control を貼り付けると、ブラウザと CDN がそれぞれ何秒キャッシュするか、使う前に再検証が要るかを示し、no-store と max-age の併用などの矛盾を指摘します。用途に合う書き方も作れます。

アップロードなし

HTML 構造・見出し・画像・リンク診断

ページの HTML を貼り付けるだけで、SEO とアクセシビリティの基本項目（見出し構成・メタタグ・OGP・画像の alt・リンク・構造化データ）を一覧で確認できます。検索結果と SNS でのおおよその見え方もプレビューします。

アップロードなし

robots.txt テスター

robots.txt を貼り付けると、指定した URL が Googlebot や AI クローラーに「許可」か「ブロック」かと、どの行のルールが効いたかがすぐ分かります。つづりの誤りや Google が無視する命令も指摘します。

アップロードなし

最終更新: