CORSエラーの対処法｜「Access-Control-Allow-Origin」設定と解決手順

CORS API エラー フロントエンド Webセキュリティ
結論：30秒で CORS エラーを解決する
  • 根本原因: サーバーが Access-Control-Allow-Origin を返していない
  • 自作 API: サーバー側ミドルウェアでオリジン許可ヘッダーを付与
  • 外部 API: 自身のバックエンドサーバー経由（BFF プロキシ）で呼び出す

1. CORS エラーの仕組み

ブラウザの同一オリジン制限（Same-Origin Policy）により、https://example.com のスクリプトから https://api.other.com へリクエストを送ると、サーバー側が明示的に許可を提示しない限りブラウザがレスポンスを遮断します。

2. 状況別の適切な対処法

状況 対処法
自分でAPIを開発している サーバー（Express、FastAPI、Nginx等）で Access-Control-Allow-Origin: https://example.com を返します。
外部APIがCORS非対応 自分のサーバーにプロキシ（BFF）を配置し、フロント → 自サーバー → 外部API の経路にします。
ローカル開発環境 Vite や Next.js の Dev Server Proxy 機能を設定して同律オリジン化します。

3. 注意点（ハマりどころ）

  1. ワイルドカード * と Cookie 認証の相反
    • 認証 Cookie や Authorization ヘッダーを扱うリクエスト（credentials: 'include'）では、Access-Control-Allow-Origin: * を指定するとブラウザ側でエラーになります。特定オリジンを明示的に指定してください。