シナリオ一覧へ戻る

🌐

本番だけCORSエラー

中級12分フロントエンド担当

本番にデプロイしたら、フロントエンドがAPIを叩けなくなった。開発環境ではちゃんと動いていたのに…

このシナリオで練習すること

複数の手掛かりをつなぎながら復旧まで持っていく練習向けです。

想定ロール

フロントエンド担当

到達目標

本番ドメインからAPIを叩いても CORS エラーが出ないようにする

最初に見えている症状

ブラウザのコンソールに `No 'Access-Control-Allow-Origin' header` エラー
curl で直接APIを叩くと 200 が返る（サーバー自体は正常）
開発環境 (localhost:3000) からは問題なく叩けていた

このシナリオで学べること

CORS はサーバー側のヘッダー応答で制御される
ブラウザのネットワークタブ・コンソールエラーの読み方
preflight OPTIONS リクエストの存在

このページの使い方

まず症状を読んで、どこから確認するか仮説を立てる
プレイ画面では help、ls、cat、grep から始める
解けたあとに学べることを見返して、型として残す

このシナリオを始める

関連シナリオ

同じ難易度か、次に進みやすいシナリオを選んでいます。

古いビルドが表示され続ける

バージョン2.0をデプロイしたのに、ユーザーからは「古い画面が表示される」と報告が。hard reload しても直らない。

環境変数のキー名が違う

デプロイ直後からAPIサーバーが500エラーを返し続けている。ログには「connection refused」の文字が…

ポートが既に使われている

新バージョンをデプロイしたら、web-app が起動しない。ログには EADDRINUSE の文字が。

よくある質問

このシナリオはどんな人向けですか？

フロントエンド担当向けです。複数の手掛かりをつなぎながら復旧まで持っていく練習向けです。

何をゴールにすればよいですか？

本番ドメインからAPIを叩いても CORS エラーが出ないようにする

始める前に知っておくと良いことはありますか？

まずは症状を読み、ログ・設定・再起動のどこから見るかを決めると進めやすくなります。help、ls、cat、grep などの基本コマンドから入るのがおすすめです。