JavaScript
🌐 fetch で CORS エラーが出る
別ドメインへのリクエストがブロックされている
😰 こんな症状
fetch() を使うとコンソールに CORS エラーが表示される。
🔍 原因
ブラウザのセキュリティ機能で、別のドメインへのリクエストがブロックされている。
❌ エラーが起きるコード
fetch("http://api.example.com/data")
// CORS エラー✅ 直し方
ローカルファイル（file://）ではなくローカルサーバー（localhost）で実行する。API 側で CORS ヘッダーが設定されているか確認する。
✅ 修正後のコード
fetch("http://api.example.com/data", {
mode: "cors"
})
// サーバー側で Access-Control-Allow-Origin 設定が必要この解決法は役立ちましたか？
🔗 関連するエラー
- Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
- Uncaught TypeError: Cannot read properties of null — getElementById の id が存在しない
- 404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
- ボタンを押しても何も起きない — getElementById の id 不一致
- SyntaxError: Unexpected token — 括弧・波括弧の閉じ忘れ
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説