# CORS Studio

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

- URL: https://tools.itlibra.com/ja/cors-studio
- 端末内で処理・アップロードなし
- 最終更新: 2026-10-26

## 使い方

1. 「判定」タブで、ページの Origin、メソッド、リクエストヘッダーの名前、Content-Type の値、認証情報の有無を入れます。
2. プリフライト（OPTIONS）の応答と、本番の応答（GET などの実際の応答）のヘッダーを貼り付けます。ブラウザの開発者ツールの「ネットワーク」タブからコピーできます。
3. 「通る」「通らない」と、ヘッダーごとの ✓ ✗ と直し方を確かめます。ヘッダーを貼らないときは、必要な応答の欄が「判定できません」と示します。
4. 「設定を作る」タブで、許可する Origin・メソッド・ヘッダーを選ぶと、応答ヘッダーと nginx・Apache・Express・Next.js の設定例を出します。

## こんなときに

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

## できること

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

メソッドが 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 パッケージを使わない素の書き方です。


## 対応形式

### 入力

- 要求の 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 向けの応答が使い回されることがあります。