先に結論
ConsoleのCORS文言だけで判断せず、失敗したrequest URLとorigin、OPTIONS preflight、実際のresponse header、credential、CDN cacheを一組として確認します。
最初の5分で失敗requestを一つ固定する
- ブラウザーConsoleのエラー全文とNetwork欄を保存する。
- request URL、画面のorigin、method、送信header、credential有無を記録する。
- OPTIONS preflightが送られたか、statusとresponse headerを確認する。
- API本体が直接成功するかと、ブラウザーから読めるかを分ける。
- CDN／API gateway／originのどこがCORS headerを付与する設計か確認する。
重要：CORSはブラウザーの読み取り制御です。Network欄でDNS・TLS・接続自体が失敗している場合は、CORS headerを直す前に通信障害を解消します。
Console文言ごとの確認先
| 主な文言 | 優先候補 | 次の確認 |
|---|---|---|
| Allow-Origin missing | header未付与・error response | 実status、gateway／origin response |
| Origin does not match | 許可origin不一致・重複header | scheme、host、port、header個数 |
| Method not found | preflightのmethod不足 | Allow-Methodsと実method |
| header missing from preflight | 送信headerが未許可 | Access-Control-Request-Headers |
| Credential not supported with * | credentialとwildcardの競合 | 明示origin、Allow-Credentials |
| CORS request did not succeed | ネットワーク・TLS・拡張機能 | requestが到達したか、別ブラウザー |
OPTIONS preflightと本requestを分ける
- OPTIONSがCDN／WAF／認証で拒否されていないか確認する。
- Access-Control-Request-Methodと-Headersに対する許可値を確認する。
- preflight成功後に本requestが401／403／5xxになっていないか確認する。
- error responseにも必要なCORS headerを返す設計か確認する。
- origin別に応答が変わる場合はVary: OriginとCDN cache keyを確認する。
必要なoriginだけを安全に許可する
MDNは、不適切なAccess-Control-Allow-Origin設定により、許可していないoriginからresponseを読まれる危険を説明しています。認証APIでは、許可originを完全一致で管理し、入力値を検証せずそのまま反射しません。
- scheme、host、portを含む完全なoriginで許可する。
- credentialが必要なendpointと公開resourceを分ける。
- methodとheaderは実際に必要なものだけを許可する。
- staging、preview、localhostの許可を本番へ残さない。
- CDN cacheから別origin向けheaderが配信されないことを確認する。
避ける操作
- 全endpointへ一律にAccess-Control-Allow-Origin:*を付ける。
- requestのOriginを検証せず、そのまま許可headerへ反射する。
- ブラウザーのWeb securityを無効化して本番運用する。
- API keyをフロントエンドへ埋め込んでCORS問題を迂回する。
- preflightと本request、CDNとoriginを同時変更する。
公式情報
よくある質問
Access-Control-Allow-Originを*にすれば直りますか？
公開してよい非認証リソースでは選択肢ですが、credential付きrequestではワイルドカードを使えません。必要なoriginだけを許可し、CookieやAuthorizationを使う場合はcredential設定とキャッシュを含めて確認します。
ブラウザー拡張でCORSを無効化してよいですか？
本番解決にはなりません。利用者の保護を外すため、原因確認後はサーバー、API gateway、CDNの正しいresponse headerを修正します。
CORS request did not succeedはCORS設定ミスですか？
MDNは、HTTP接続がネットワークまたはprotocol層で失敗した場合にもこの表示になると説明しています。DNS、TLS、接続拒否、広告ブロッカーなどを先に確認します。