← inaro.devAI駆動開発 学習ツール

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が生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。