CORSエラーってそもそも何？

ブラウザが「セキュリティ上、別のドメインへの通信を勝手にさせない」ルール（同一オリジンポリシー）を持っています。フロントエンド（例: example.com）からAPI（api.example.com など違うドメイン）を呼ぶと、このルールにひっかかってエラーになります。サーバー側で「このドメインからは許可します」というCORSヘッダーを返すことで解決できます。

なぜサーバー側での設定が必要？

CORSはクライアント（ブラウザ）ではなくサーバー側で制御する仕組みです。「どのオリジン（サイト）からのリクエストを許可するか」をサーバーが判断してヘッダーで応答します。フロントエンドのコードを変えてもCORSエラーは解決せず、サーバー側の設定が必須です。本ツールで必要なヘッダーを生成できます。

`Access-Control-Allow-Origin: *`（ワイルドカード）で大丈夫？

公開API（誰でも使わせたいAPI）なら問題ありませんが、認証情報を含むAPIでは推奨されません。特に `Access-Control-Allow-Credentials: true` と併用する場合、ワイルドカードは使えず具体的なオリジン指定が必要です。本番では信頼できるオリジンだけを明示的に許可するのが安全です。

複数のオリジンを許可するには？

Access-Control-Allow-Origin には1つのオリジンしか書けません。複数許可したい場合は、サーバー側でリクエストの Origin ヘッダーをチェックして、許可リストに含まれていれば動的にそのオリジンを返す実装が一般的です。Express.js の cors パッケージなら `origin: ['https://a.com', 'https://b.com']` のように配列指定できます。

Access-Control-Allow-Credentials って何？

Cookieや Authorization ヘッダー（Bearer トークン等）をクロスオリジンリクエストに含めることを許可する設定です。`true` にすると認証情報付きの通信ができますが、その場合 Access-Control-Allow-Origin にワイルドカード `*` は使えず、具体的なオリジンを指定する必要があります。認証が必要なAPIには必須の設定です。

Access-Control-Max-Age は何のため？

プリフライトリクエスト（OPTIONS）の結果をブラウザがどれくらい長くキャッシュするかを秒単位で指定します。例えば 86400（1日）に設定すれば、24時間はプリフライトが再送されず、パフォーマンスが向上します。設定を頻繁に変える段階では短めに、安定運用時は長めに設定するのが定石です。

Nginx で CORS を設定するには？

`add_header` ディレクティブを使います。本ツールで「Nginx」形式を選ぶと、`add_header 'Access-Control-Allow-Origin' 'https://example.com';` のようなコードが生成されるので、`nginx.conf` の該当ロケーションブロックに貼り付けるだけです。OPTIONSメソッドの処理も自動生成に含まれます。

Express.js（Node.js）での設定は？

`cors` パッケージ（`npm install cors`）を使うのが一般的です。本ツールで「Express.js」形式を選ぶと、`app.use(cors({ origin: ..., methods: [...], ... }))` のような設定コードが生成されます。そのまま Express アプリケーションに組み込めます。

OPTIONS メソッドが 404 になるのはなぜ？

多くのフレームワークでは OPTIONS メソッドがデフォルトでハンドリングされていません。本ツールで生成した設定（特にNginx形式）には、OPTIONS リクエストに対して 204 No Content を返す処理が含まれています。または cors パッケージ等が自動的にOPTIONSを処理してくれます。

生成された設定は外部に送信されますか？

いいえ、すべての生成処理はブラウザ内で完結します。設定内容も生成コードも外部に送信されません。社内APIの設定、機密情報を含むオリジン設定など、外部に漏らしたくない設計内容も安心して扱えます。

CORS設定ジェネレーター

CORSのAccess-Control系HTTPヘッダーをGUIで設定して、HTTPヘッダー・Nginx・Express.js・Spring Boot形式のコードをワンクリック生成する無料オンラインツール。プリフライトリクエスト対応、認証情報付き対応、CORSエラー解決に、ブラウザ完結で外部送信なし。

CORS（クロスオリジンリソース共有）の設定に必要なAccess-Control系ヘッダーをGUIで設定し、各種サーバー形式のコードとしてワンクリック生成するツールです。CORSエラー対応の必需品。

CORS設定ジェネレーター

// 許可オリジン

// 許可メソッド

// 許可ヘッダー

// 公開ヘッダー

// オプション

Allow-Credentials

Max-Age (秒)

// 出力

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

// CORS設定ジェネレーターの機能と特徴

Access-Control-Allow-Originエラーの原因と対処

「ブラウザのコンソールに `Access-Control-Allow-Origin エラー` が出た」「別ドメインのAPIをフロントから呼びたい」「Nginxで CORS 対応するけど設定内容がわからない」「Express.js の cors ミドルウェア設定を書きたい」「Spring Boot でCORS設定コードが必要」といった、CORS設定エラーへの対応・新規API開発時のCORS設定に使えます。

Nginx・Express.js・Spring Bootの設定例

設定内容を **HTTPヘッダー**（そのままレスポンスに付ける生の形式）、**Nginx**（`add_header` ディレクティブ）、**Express.js**（`cors` パッケージの設定オブジェクト）、**Spring Boot**（Java の CorsConfiguration クラス）の4形式で自動生成します。使っているサーバー環境に合った形式を選ぶだけで、そのまま設定ファイルに貼り付けられます。

プリフライトリクエスト（OPTIONS）とは

GET/POST以外のメソッド（PUT・DELETE等）や独自ヘッダーを使う場合、ブラウザは事前に OPTIONS メソッドで「これから送っていい？」と確認する「プリフライトリクエスト」を送ります。本ツールでは Access-Control-Allow-Methods・Allow-Headers・Max-Age といったプリフライト対応ヘッダーもGUIで設定できます。

ステータスコードやヘッダーも確認したいとき

HTTPステータスコードの意味は HTTPステータスコード一覧、レスポンスヘッダーの分析は HTTPヘッダ解析、実際のcURLコマンドを他言語コードに変換したい場合は cURL変換が便利です。リソースの読み込み元を制限する Content-Security-Policy は CSP ジェネレーターで生成できます。

// CORS設定ジェネレーターに関するよくある質問

CORSエラーってそもそも何？: ブラウザが「セキュリティ上、別のドメインへの通信を勝手にさせない」ルール（同一オリジンポリシー）を持っています。フロントエンド（例: example.com）からAPI（api.example.com など違うドメイン）を呼ぶと、このルールにひっかかってエラーになります。サーバー側で「このドメインからは許可します」というCORSヘッダーを返すことで解決できます。
なぜサーバー側での設定が必要？: CORSはクライアント（ブラウザ）ではなくサーバー側で制御する仕組みです。「どのオリジン（サイト）からのリクエストを許可するか」をサーバーが判断してヘッダーで応答します。フロントエンドのコードを変えてもCORSエラーは解決せず、サーバー側の設定が必須です。本ツールで必要なヘッダーを生成できます。
`Access-Control-Allow-Origin: *`（ワイルドカード）で大丈夫？: 公開API（誰でも使わせたいAPI）なら問題ありませんが、認証情報を含むAPIでは推奨されません。特に `Access-Control-Allow-Credentials: true` と併用する場合、ワイルドカードは使えず具体的なオリジン指定が必要です。本番では信頼できるオリジンだけを明示的に許可するのが安全です。
複数のオリジンを許可するには？: Access-Control-Allow-Origin には1つのオリジンしか書けません。複数許可したい場合は、サーバー側でリクエストの Origin ヘッダーをチェックして、許可リストに含まれていれば動的にそのオリジンを返す実装が一般的です。Express.js の cors パッケージなら `origin: ['https://a.com', 'https://b.com']` のように配列指定できます。
Access-Control-Allow-Credentials って何？: Cookieや Authorization ヘッダー（Bearer トークン等）をクロスオリジンリクエストに含めることを許可する設定です。`true` にすると認証情報付きの通信ができますが、その場合 Access-Control-Allow-Origin にワイルドカード `*` は使えず、具体的なオリジンを指定する必要があります。認証が必要なAPIには必須の設定です。
Access-Control-Max-Age は何のため？: プリフライトリクエスト（OPTIONS）の結果をブラウザがどれくらい長くキャッシュするかを秒単位で指定します。例えば 86400（1日）に設定すれば、24時間はプリフライトが再送されず、パフォーマンスが向上します。設定を頻繁に変える段階では短めに、安定運用時は長めに設定するのが定石です。
Nginx で CORS を設定するには？: `add_header` ディレクティブを使います。本ツールで「Nginx」形式を選ぶと、`add_header 'Access-Control-Allow-Origin' 'https://example.com';` のようなコードが生成されるので、`nginx.conf` の該当ロケーションブロックに貼り付けるだけです。OPTIONSメソッドの処理も自動生成に含まれます。
Express.js（Node.js）での設定は？: `cors` パッケージ（`npm install cors`）を使うのが一般的です。本ツールで「Express.js」形式を選ぶと、`app.use(cors({ origin: ..., methods: [...], ... }))` のような設定コードが生成されます。そのまま Express アプリケーションに組み込めます。
OPTIONS メソッドが 404 になるのはなぜ？: 多くのフレームワークでは OPTIONS メソッドがデフォルトでハンドリングされていません。本ツールで生成した設定（特にNginx形式）には、OPTIONS リクエストに対して 204 No Content を返す処理が含まれています。または cors パッケージ等が自動的にOPTIONSを処理してくれます。
生成された設定は外部に送信されますか？: いいえ、すべての生成処理はブラウザ内で完結します。設定内容も生成コードも外部に送信されません。社内APIの設定、機密情報を含むオリジン設定など、外部に漏らしたくない設計内容も安心して扱えます。

// CORS設定ジェネレーターの使い方

許可するオリジンを設定

Access-Control-Allow-Origin にワイルドカード（`*`）または具体的なオリジンURL（`https://example.com`）を入力します。認証情報を含む場合は具体的なオリジンを指定してください。
メソッドとヘッダーを選択

許可するHTTPメソッド（GET・POST・PUT・DELETE等）、許可するリクエストヘッダー（Content-Type・Authorization等）をチェックボックスで選びます。プリフライト対応の Max-Age や Credentials も必要に応じて設定してください。
出力形式を選んでコピー

HTTPヘッダー・Nginx・Express.js・Spring Boot から使う環境に合った形式を選び、COPYボタンで生成されたコードをコピー。設定ファイル・ミドルウェア・サーバー設定にそのまま貼り付けて使えます。

カテゴリセキュリティ