APIを呼び出そうとしたら、コンソールに赤い文字でこんなエラーが——。
フロント側のコードは合っているはずなのに、なぜか通信がブロックされる。
このCORSエラーは、多くの開発者が一度はハマる定番のつまずきポイントです。
この記事では、CORSエラーの仕組みと原因、そして正しい対処法を、初心者にもわかりやすく解説します。
コードは合ってるはずやのにブロックされるねん…なんでなん？
この記事の対象読者
- fetchやAPI通信でCORSエラーに遭遇した方
- 「なぜフロントのせいじゃないの？」と疑問な方
- 正しい直し方と、やってはいけない対処を知りたい方
- フロントエンド開発を学び始めた方
CORSエラーとは？
CORSエラーは、ブラウザの安全機能によって、別のオリジンへの通信がブロックされるときに起きます。
ここでいう「オリジン」とは、プロトコル・ドメイン・ポート番号の3点セットのことです。
この3つのうち1つでも違えば「別のオリジン（クロスオリジン）」と見なされます。
ブラウザには、あるサイトが勝手に別のサイトの情報へアクセスするのを防ぐ「同一オリジンポリシー」という仕組みがあります。
CORSは、その制限を安全に緩めて、許可された通信だけを通すための仕組みなのです。
CORS（Cross-Origin Resource Sharing）とは、異なるオリジン間で安全にデータをやり取りする仕組みのこと。
なぜこんな仕組みがあるのか
もしこの制限がなければ、悪意あるサイトがあなたのログイン中のサービスに勝手にアクセスし放題になってしまいます。
CORSエラーは「じゃま者」ではなく、あなたを守るための仕組みが働いている証拠でもあります。
よくあるエラーメッセージ
典型的なのは、次のようなメッセージです。
Access to fetch at 'https://api.example.com/data'
from origin 'http://localhost:3000' has been blocked
by CORS policy: No 'Access-Control-Allow-Origin' header
is present on the requested resource.要するに、「サーバーからの返事に“このオリジンを許可します”という印がなかった」という意味です。
原因は「フロント」ではなく「サーバー側」
ここが最大のポイントです。
エラーはブラウザ（フロント）に表示されますが、本当の原因はサーバー側の設定にあることがほとんどです。
サーバーが「このオリジンからのアクセスを許可します」というヘッダーを返していないため、ブラウザが安全のために通信を止めているのです。
フロントやなくてサーバー側の話やったんか…！道理でコード直しても直らんわけや。
CORSエラーの対処法
①サーバー側で許可オリジンを設定する（正攻法）
根本的な解決は、サーバーが許可するオリジンをヘッダーで返すことです。
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-TypeたとえばNode.js（Express）なら、CORS用のミドルウェアで簡単に設定できます。
const cors = require("cors");
// 許可するオリジンを指定する
app.use(cors({ origin: "https://example.com" }));②開発中はプロキシで回避する
「サーバー側をすぐには直せない」開発中には、開発サーバーのプロキシ機能で回避できます。
フロントと同じオリジンを経由してAPIへ橋渡しすることで、ブラウザの制限を避けられます。
// vite.config.js の例
export default {
server: {
proxy: {
"/api": "http://localhost:8000"
}
}
}③プリフライト（OPTIONS）に対応する
特定の条件では、ブラウザが本番のリクエストの前にOPTIONSという“事前確認”のリクエストを送ります。
サーバーがこのプリフライトにも正しく応答するよう設定されているか、あわせて確認しましょう。
やってはいけない・注意点
手っ取り早い方法にはワナもあるので、次の点に注意してください。
- 本番でむやみに全許可（ワイルドカード）にしない：セキュリティ上のリスクになります
- 認証情報を含む通信では全許可は使えない：具体的なオリジンの指定が必要です
- ブラウザ拡張でCORSを無効化するのは一時しのぎ：自分の手元で消えるだけで、本番の解決にはなりません
あくまでサーバー側で正しく許可を設定するのが本筋だと覚えておきましょう。
まとめ
CORSエラーは、ブラウザの安全機構が、許可されていないオリジン間の通信を止めている状態です。
エラーはフロントに出ますが、直すべきは基本的にサーバー側の設定です。
開発中はプロキシで回避しつつ、最終的にはサーバーで許可オリジンを正しく設定して解決しましょう。
仕組みが分かったらこわくないな。まずはサーバー側の設定を見てみるわ！
