CORS エラーの切り分けを訓練するための確認順
CORS エラーは、見た目は似ていても原因が何通りもあります。
フロント側の呼び出しなのか、API 側の許可設定なのか、環境差分なのかを、短時間で切り分けられるかが重要です。
このページでは、incident-sim で練習するときに意識したい確認順をまとめます。
最初に分けるべき三つ
まずは次の三つを分けて考えます。
- ブラウザからのリクエスト自体は飛んでいるか
- API 側はレスポンスを返しているか
- 許可ヘッダーやオリジン設定が想定どおりか
ここを混ぜると、原因特定が遅くなります。
よくある確認ポイント
Originが想定のドメインになっているかAccess-Control-Allow-Originが不足していないかOPTIONSが失敗していないか- ステージングと本番で許可設定が違っていないか
- API Gateway や CDN 側でヘッダーが消えていないか
訓練で見るべきログ
incident-sim でこのテーマを扱うなら、次を往復できるようにしたいです。
- ブラウザのエラー表示
- ネットワークタブのリクエスト内容
- API 側のアクセスログ
- 直前デプロイの設定差分
実務で効くのは確認順
CORS の知識そのものより、どこから見るかの順番が大事です。
- 先にブラウザだけ見て終わらない
- API だけ疑ってフロント条件を見落とさない
- 設定変更の履歴を最初から候補に入れる
この順番が安定すると、初動のスピードが上がります。
次に進むなら
incident-simの CORS 系シナリオで手を動かす- 環境変数ミスガイドと見比べて、設定系障害の共通点を整理する
- 結果画面で「最初に見た場所」が妥当だったかを振り返る
読むだけだと身につきにくいテーマなので、練習導線まで使う前提で見るのがおすすめです。
[ ./next_action ]
読んだら、 Web本番障害シミュレーター を実際に動かす。
この開発ログは Web本番障害シミュレーター をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。