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無効のブラウザ拡張を使う（本番では絶対に使わない）。

関連記事

この記事は セキュリティ テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。

トピック記事
XSS攻撃と防御の完全ガイドXSS攻撃と防御の完全ガイド｜反射型・蓄積型・DOM型の対策
CSRF対策の実装ガイドCSRF対策の実装ガイド｜SameSite・Synchronizer Token・Laravel/Expressコード
Double Submit Cookie完全実装Double Submit Cookie完全実装｜Synchronizer Token比較・SPA+JWT・サブドメイン攻撃
Content Security Policy (CSP) 設定ガイドContent Security Policy (CSP) 設定ガイド｜XSS・クリックジャッキング対策
CSP Report-Only 段階導入ガイドCSP Report-Only 段階導入ガイド｜本番を壊さずポリシーを検証する
セキュリティヘッダー一覧と設定ガイドセキュリティヘッダー一覧と設定ガイド｜CSP・HSTS・Referrer-Policy・Permissions-Policy
セキュアなCookie設定ガイドセキュアなCookie設定ガイド｜HttpOnly・Secure・SameSiteの使い分けとCSRF対策
CORSプリフライトリクエストCORSプリフライトリクエスト｜OPTIONSが飛ぶ条件と正しい応答
ローカル開発でCORSエラーが出る原因と3つの回避策ローカル開発でCORSエラーが出る原因と3つの回避策
OAuth2 PKCE SPA実装ガイドOAuth2 PKCE SPA実装ガイド｜Authorization Code + S256 + BFFパターン
Passkeys・WebAuthn実装の基礎Passkeys・WebAuthn実装の基礎｜FIDO2・Resident Key・@simplewebauthn/server
JWTのデバッグ方法JWTのデバッグ方法｜トークンの中身を安全に確認する

まとめ

CORSエラーは、サーバーが「このオリジンからのアクセスを許可する」と返してくれないことが原因です。フロントだけでは解決できないので、サーバー側の設定を確認するか、プロキシを検討してみてください。APIデバッグ時はJSON整形やJWTデコードなどのツールも活用してみてください。

🧪 JSON整形ツールでAPIレスポンスを確認

CORS許可のAPIで取得したJSONを整形して確認できます

試す