ESC

CORS設定

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Allow-Credentials
ワイルドカード(*)オリジンでは使用できません

生成された出力

CORSヘッダーを生成するためにオプションを設定してください...
CORSヘッダーを生成するためにオプションを設定してください...
CORSヘッダーを生成するためにオプションを設定してください...
CORSヘッダーを生成するためにオプションを設定してください...
CORSヘッダーを生成するためにオプションを設定してください...
すべての処理はブラウザ内で行われます。データはサーバーに送信されません。

使用例

オープンパブリックAPI

任意のオリジンからGETおよびPOSTリクエストを許可。どのWebサイトにもデータを提供するパブリックAPIに最適。

認証付き内部アプリ

資格情報サポート付きで特定のオリジンにアクセスを制限。認証付きの内部アプリケーションに最適。

読み取り専用API

任意のオリジンからのGETリクエストを許可し、ページネーションヘッダーを公開する読み取り専用API設定。

機能

フル設定

オリジン、メソッド、ヘッダー、資格情報、max-ageを含むすべてのCORSヘッダーを設定

マルチサーバー対応

Nginx、Apache、Node.js/Express、PHP用のすぐに使える設定スニペットを取得

カスタムオリジンとヘッダー

簡単なタグベースのインターフェースで複数のカスタムオリジンとヘッダーを追加

プライバシー優先

すべての処理はブラウザ内でローカルに行われ、サーバーにデータは送信されません

使い方

1

設定を構成

許可するオリジン、HTTPメソッド、ヘッダー、max-age、資格情報オプションを設定します。

2

出力形式を選択

HTTPヘッダー、Nginx、Apache、Node.js、PHPの出力形式を切り替えます。

3

コピーしてデプロイ

生成された設定をコピーして、サーバーのセットアップに追加します。

よくある質問

CORS(Cross-Origin Resource Sharing)は、サーバーが明示的に許可しない限り、あるオリジンのJavaScriptが別のオリジンにリクエストを送るのを防ぐブラウザのセキュリティ機構です。CORSがなければ、悪意あるページがログイン中のセッションを使って他のサービスにリクエストを送れてしまいます。サーバー上のCORSヘッダーはブラウザに「このオリジンは信頼できる」と伝えます。

CORS仕様では、Access-Control-Allow-Origin: *とAccess-Control-Allow-Credentials: trueの組み合わせが明示的に禁止されています。credentials(クッキー、Authorizationヘッダー)が関わる場合、サーバーはワイルドカードではなく正確なリクエスト元のオリジンを返す必要があります。これにより、任意のウェブサイトがログイン済みユーザーの認証情報を使って認証済みAPI呼び出しを行うことを防ぎます。

「単純でない」リクエストの前にはpreflight OPTIONSリクエストが送られます。単純なリクエストは標準ヘッダーのみのGETまたはPOSTです。単純でないリクエストには、PUT、DELETE、PATCHメソッド、カスタムヘッダー(Authorization、X-API-Keyなど)、application/jsonのContent-Typeが含まれます。サーバーはOPTIONSリクエストに適切なAllow-*ヘッダーで応答する必要があります。

Max-Ageはブラウザにpreflight応答を何秒間キャッシュするかを伝えます。一般的な値は86400(24時間)です。これにより本番環境でのpreflightの往復が減ります。キャッシュの問題を防ぐため、開発中は0に設定してください。

デフォルトでは、JavaScriptは限られた「安全な」レスポンスヘッダーしか読めません。APIがX-Total-CountやX-Request-Idなどのカスタムヘッダーを返す場合、それらをAccess-Control-Expose-Headersに列挙する必要があります。これがないと、JavaScriptはHTTPレスポンスに存在するにもかかわらず、それらのヘッダーをundefinedとして認識します。

「特定のオリジン」を選択し、信頼できるオリジンを個別に追加します(例:https://app.example.com)。CORS仕様では1つのヘッダーに複数の値はサポートされていません。複数のオリジンには、サーバーがリクエストのOriginヘッダーをホワイトリストと動的に照合し、一致するものを返す必要があります。生成されたNginx/Apache/Node.jsの設定にはこのロジックが含まれています。

HTTPヘッダー(生のヘッダー値)、Nginx(add_headerディレクティブ)、Apache(Header setディレクティブを含む.htaccess)、Node.js/Express(corsパッケージまたは手動のres.setHeader呼び出しを使ったミドルウェア)、PHP(header()関数呼び出し)。各フォーマットを確認するにはタブを切り替えてください。

いいえ。すべてブラウザ内で動作します。サーバーに送信されることも、どこかに保存されることもありません。

CORSヘッダーを手軽に設定

ブラウザのコンソールでCORSエラーに悩まされた経験はありませんか?このジェネレーターなら、仕様を暗記しなくても数秒で正しいヘッダーを生成できます。

主要サーバーに対応した設定コード

Nginx、Apache、Node.js/Express、PHP用のコピー&ペーストで使えるスニペットを生成します。タブを切り替えてコードをコピーするだけで設定完了です。

アクセス権限を細かく制御

許可するオリジン、HTTPメソッド、ヘッダーを正確に指定できます。Credentials、プリフライトキャッシュ用のMax-Age、公開ヘッダーもビジュアルインターフェースから設定可能です。

データはお使いのブラウザ内で完結

すべての処理はブラウザ内で行われ、外部サーバーへのデータ送信は一切ありません。社内プロジェクトの設定生成にも安心してお使いいただけます。

セキュリティとプライバシー

あなたのデータの安全を最優先しています

ローカル処理

すべての処理がブラウザ内で完結します

データ送信なし

データはサーバーに送信されません

保存しません

データは保存も共有もされません

SSL暗号化

安全な通信でご利用いただけます

MoreOnlineToolsでもっと見る