とは
CORS 报错调试 (オリジン間リソース共有) とは？
CORS (オリジン間リソース共有) ヘッダーチェッカーは、ブラウザデバッグで最も重要な問いに答えるのに役立ちます。それは、「ブラウザはこのリクエストを許可するか、それともポリシーレイヤーで先にブロックするか？」という点です。CORS ヘッダーを一つずつ読み取って推測する代わりに、リクエストメソッド、カスタムヘッダー、資格情報（Credentials）モード、およびレスポンスヘッダーを 1 か所で比較できます。
これは、Postman や curl では動作するのにブラウザでは失敗するといった状況で特に役立ちます。その場合、バックエンドはトランスポート層では問題なくても、CORS の規約が不完全だったり内部で矛盾していたりするために、ブラウザが応答をブロックしている可能性があります。
の使い方
CORS 报错调试 (オリジン間リソース共有) の使い方
フロントエンドのオリジン（Origin）、リクエストメソッド、およびブラウザが送信するカスタムリクエストヘッダーを入力します。次に、API またはゲートウェイが現在返しているレスポンスヘッダー、特に `Access-Control-Allow-Origin`、`Access-Control-Allow-Methods`、`Access-Control-Allow-Headers` を入力してください。
チェッカーは、リクエストが Simple（単純）か Preflight（プリフライト）か、オリジンが許可されているか、そしてプリフライト応答が実際に要求されたメソッドやヘッダーを許可しているかを判定します。
使用例
使用例
シナリオ：
フロントエンドオリジン: https://app.aistacker.dev
メソッド: GET
ヘッダー: authorization, x-client-version
Allow-Origin: *
Allow-Methods: GET, POST, OPTIONS
Allow-Headers: authorization, x-client-version
Credentials: true
結果：
ブラウザはリクエストをブロックします。資格情報（Credentials）を伴うリクエストでは、Allow-Origin にワイルドカード `*` を使用することはできません。代わりに正確なオリジンを返してください。主な使用シーン
主な使用シーン
1. curl では成功する API 呼び出しがブラウザで失敗する理由を解明する。
2. 特定のカスタムヘッダーがプリフライト（Preflight）失敗の本当の原因かどうかを確認する。
3. 使用しているリクエストモードに対して `Access-Control-Allow-Origin: *` が安全かどうかを検証する。
4. ゲートウェイが CORS ヘッダーを書き換えたり削除したりする場合に、ローカルの成功と本番の失敗を比較する。
よくある質問