メインコンテンツにスキップ

CORSヘッダービルダー

標準的なCORSレスポンスヘッダー — Access-Control-Allow-Origin、-Methods、-Headers、-Credentials、-Max-Age、-Expose-Headers — を構造化されたフィールドから構築し、サーバーレスポンスに貼り付ける準備ができた状態で提供します。

入力

リソースへのアクセスが許可されるOrigin。すべてのOriginを許可する場合は*を使用します — ただし、認証情報と組み合わせることはできません。

クロスオリジンリクエストに許可するHTTPメソッドのカンマ区切りリスト。

ブラウザが送信できるリクエストヘッダーのカンマ区切りリスト。

ブラウザがプリフライト結果をキャッシュできる期間(秒単位)。空のままにすると省略されます。

オプション。JavaScriptが読み取ることが許可されるレスポンスヘッダーのカンマ区切りリスト。

出力

生成されたCORSヘッダー

1行に1つのヘッダー — サーバーレスポンス設定に直接貼り付けてください。

役に立ちましたか?

このツールを使う他の方法

REST API

curl -X POST https://api.iotools.cloud/v1/tool/cors-headers-builder \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "origin": "https://example.com",
    "methods": "GET, POST",
    "headers": "Content-Type, Authorization",
    "allowCredentials": "true",
    "maxAge": "86400",
    "exposeHeaders": ""
  }'

ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。

AIエージェントに依頼する

Use the IOTools `cors-headers-builder` tool (CORS Headers Builder) on this input:

YOUR_INPUT_HERE

IOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。

埋め込みウィジェット

<iframe
  src="https://iotools.cloud/embed/cors-headers-builder/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="CORSヘッダービルダー — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。

API/MCP 1回あたりの費用5クレジットから
クレジットが足りませんか?料金を見る

次の方法でも利用可能

ガイド

CORSヘッダービルダーとは?

Cross-Origin Resource Sharing(CORS)は、ブラウザが1つのOrigin(https://app.example.com)で実行されているウェブページが、別のOrigin(https://api.example.com)のサーバーにリクエストを送信できるかどうかを判断するためのメカニズムです。デフォルトでは、ブラウザはそのようなリクエストをブロックします — サーバーは特定のAccess-Control-*レスポンスヘッダーのセットを送り返すことで、これを許可する必要があります。このツールはいくつかの構造化されたフィールドからこれらのヘッダーを構築するので、ヘッダーの正確な名前、カンマ区切りのルール、または人々を混乱させるtrue/*の特性を覚える必要がありません。

使用方法

  1. 許可するOrigin を設定します — https://example.comのような特定のOriginか、すべてのサイトを許可する*(認証情報がオフの場合のみ有効)。
  2. APIが受け入れる許可するメソッド許可するヘッダーをカンマ区切りで列挙します。
  3. リクエストがcookieまたはAuthorizationヘッダーを携帯する必要がある場合は、認証情報を許可をオンにします — これにより、*ではなく特定のOriginを使用することを強制されます。
  4. Max-Ageを設定してブラウザがプリフライトOPTIONSレスポンスをキャッシュする期間を制御し、必要に応じてクライアント側JavaScriptが読み取る必要があるカスタムレスポンスヘッダーの公開するヘッダーを列挙します。
  5. 生成されたCORSヘッダーボックスは自動的に更新されます — サーバーレスポンスにコピーするか、テキストファイルとしてダウンロードします。

各ヘッダーの役割

  • Access-Control-Allow-Origin — レスポンスを読み取ることができるOriginです。これは実際にクロスオリジンアクセスをアンロックするヘッダーです。これなしでは、設定されている他のすべてに関係なく、ブラウザはレスポンスをブロックします。
  • Access-Control-Allow-Methods — クロスオリジンリクエストからサーバーが受け入れるHTTPメソッド。プリフライトOPTIONSリクエストへの応答として送信されます。
  • Access-Control-Allow-Headers — クロスオリジンクライアントが設定できるリクエストヘッダー(例:Content-TypeAuthorization)。
  • Access-Control-Allow-Credentials — ブラウザがcookieとHTTP認証をリクエストページに公開するには、リテラル文字列trueである必要があります。その存在は特定のAllow-Originも必要とします。*は決してありません。
  • Access-Control-Max-Age — ブラウザが別のOPTIONSリクエストを送信する前にプリフライト結果をキャッシュできる秒数。値が大きいほどプリフライトが少なくなりますが、許可変更のロールアウトが遅くなります。
  • Access-Control-Expose-Headers — デフォルトでは、JavaScriptは「安全な」レスポンスヘッダーの小さなセットのみを読み取ることができます。カスタムヘッダー(例:X-Request-Id)をここに列挙して、fetch/XMLHttpRequestを介して読み取り可能にします。

よくある質問

認証情報と共に*を使用できないのはなぜですか? これはブラウザの意図的なセキュリティ制限です。Access-Control-Allow-Credentials: trueがワイルドカードOriginと一緒に許可されると、世界中のあらゆるウェブサイトがログイン済みユーザーのcookieを使用してAPIに認証されたリクエストを送信できます。ブラウザはこの組み合わせに従うことを拒否します — このツールはそれをデプロイする前にフラグを立てます。

プリフライト(OPTIONS)リクエストをトリガーするものは何ですか? シンプルリクエスト — GETHEAD、または標準的なコンテンツタイプを持つPOST — はサーバーに直接送信されます。それ以外(PUT/DELETE/PATCHメソッド、Authorizationのようなカスタムヘッダー、またはJSON Content-Type)は、ブラウザに自動的なプリフライトOPTIONSを最初に送信させ、実際のリクエストを送信する前にAccess-Control-Allow-*ヘッダーをチェックします。

Access-Control-Expose-Headersが必要ですか? フロントエンドのJavaScriptがデフォルトのセーフリスト(Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma)を超えてレスポンスヘッダーを読み取る場合のみです。ページネーションヘッダー、リクエストID、レート制限カウンターは、これが必要な一般的な例です。

複数の特定のOriginを許可できますか? CORSはレスポンスごとにAccess-Control-Allow-Originの1つの静的値のみを許可します。複数の既知のOriginをサポートするには、サーバーが受け取ったOriginリクエストヘッダーをallow-listと照らし合わせチェックし、動的に一致するものを返す必要があります — このツールは1回に1つのOriginのヘッダーブロックを構築します。

プライバシー

このツールはブラウザ内で完全に実行されます。入力したOrigin、メソッド、ヘッダーはサーバーに送信または保存されることはありません。

corshttp headercross-originaccess-control-allow-originpreflightweb developmenthttp

ツールが気に入りましたか?広告をなくしましょう。

1回のお支払いでアカウントから広告が完全になくなります。サブスクリプションも追跡もありません。