CORSエラーの対処法｜「Access-Control-Allow-Origin」で解決する
CORS API エラー フロントエンド
結論
CORSはサーバー側で設定する。フロントからは解決できない。自分でAPIを開発しているならヘッダーを付ける、外部APIならプロキシを置く。
CORSエラーとは
ブラウザには「同一オリジン」の制限があります。https://example.comのページからhttps://api.other.comのAPIを呼ぶと、別オリジンなので、デフォルトではブロックされます。これがCORS（Cross-Origin Resource Sharing）の仕組みです。
サーバーが「このオリジンからのリクエストは許可する」とAccess-Control-Allow-Originヘッダーで返してくれないと、ブラウザはレスポンスを捨ててエラーにします。
重要なこと
CORSはサーバー側で設定するものです。フロントのコードをいじっても、サーバーが正しいヘッダーを返してくれなければ解決しません。
対処の流れ（3ステップ）
1
自分でAPIを開発している場合、サーバーでAccess-Control-Allow-Originヘッダーを付ける
2
外部APIを使っている場合、自分のバックエンドにプロキシを置く
3
開発時はCORSを許可しているAPI（JSONPlaceholderなど）で動作確認する
状況別の対処法
| 状況 | 対処法 |
|---|---|
| 自分でAPIを開発している | サーバー（Express、FastAPI、Springなど）でレスポンスに`Access-Control-Allow-Origin`ヘッダーを付ける。本番では特定オリジンだけ許可するのが安全。 |
| 外部APIを使っている | そのAPIがCORSを許可していない場合、自分のバックエンドにプロキシを置く。フロント→自分のサーバー→外部APIの流れにすれば同一オリジンになる。 |
| 開発時のお試し | JSONPlaceholderなどCORS許可のAPIで確認。またはローカルで一時的にCORS無効のブラウザ拡張を使う（本番では絶対に使わない）。 |
まとめ
CORSエラーは、サーバーが「このオリジンからのアクセスを許可する」と返してくれないことが原因です。フロントだけでは解決できないので、サーバー側の設定を確認するか、プロキシを検討してみてください。APIデバッグ時はJSON整形やJWTデコードなどのツールも活用してみてください。
🧪 JSON整形ツールでAPIレスポンスを確認
CORS許可のAPIで取得したJSONを整形して確認できます
試す