CORSの仕組み
なぜ学ぶか: Web開発で誰もが一度はぶつかる「CORSエラー」。AIに聞いても的外れな修正をされがちで、イライラの元。でも実は、CORSはエラーではなく保護機能。「なぜブロックされたか」が分かれば、正しい直し方(多くはサーバー側の設定)にたどり着けます。
CORS=別ドメインへのアクセス制限
ブラウザの安全機能で、「あるサイトのJSが、無関係な別ドメインのAPIを勝手に呼ぶ」ことを制限します。
エラーは「保護が働いた」サイン
CORSエラーは故障ではなく、ブラウザがあなたを守った証拠。悪意あるサイトが、あなたのログイン情報を使ってAPIの応答を盗み読むのを防いでいます。
直すのは呼ばれる側(サーバー)
「このドメインからのアクセスは許可する」とサーバー側が宣言して解決します。フロントをいじっても直りません。
そもそも回避できる構成
自分のRoute Handler経由で外部APIを呼べば、サーバー間通信になりCORSは発生しません。
図解
CORS エラーが起きる状況
https://myapp.com のページ内の JavaScript が
→ https://other-api.com を直接 fetch
→ ブラウザが「別ドメインだ」とブロック(CORS エラー)
解決の方向性:
① 呼ばれる側(other-api)が myapp.com を許可する設定を持つ
→ 相手のサーバーの設定。自分では変えられないことも多い
② 自分の Route Handler 経由にする
ブラウザ → 自分の /api/xxx → other-api
→ サーバー間通信なので CORS は発生しない(回避できる)AIは「CORSエラー」と言うとフロント側をいじりがちですが、直すのは基本サーバー側。自分のAPIを経由させる②の構成なら、そもそも起きません。
ステップ 1 / 2
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。