ローカル開発でCORSエラーが出る原因と3つの回避策

CORS フロントエンド エラー解決 開発
結論

ポート番号が違うだけで「別オリジン」になる。バックエンドでヘッダーを返すか、フロントのProxy機能で回避する。

なぜlocalhost同士でエラーになるのか

ブラウザの同一オリジンポリシーにより、プロトコル＋ドメイン＋ポート番号が全て一致しないと別オリジン扱いになります。

フロントエンド APIサーバー
http://localhost:3000 http://localhost:8080
ポート3000 ポート8080 → 別オリジン
よくある勘違い

PostmanやcurlではCORSエラーは出ません。CORSはブラウザ固有のセキュリティ制限です。

回避策1：バックエンドでCORSを許可する（王道）

// Express の例
const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000'
}));

回避策2：フロントのProxy機能を使う（バックエンドをいじれない時）

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  }
});

これで fetch('/api/users') のように相対パスでリクエストすればCORSを回避できます。

回避策3：ブラウザ拡張で一時的に無効化（非推奨）

検証時に限り、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エラーの対処法｜「Access-Control-Allow-Origin」で解決する
CORSプリフライトリクエストCORSプリフライトリクエスト｜OPTIONSが飛ぶ条件と正しい応答
OAuth2 PKCE SPA実装ガイドOAuth2 PKCE SPA実装ガイド｜Authorization Code + S256 + BFFパターン
Passkeys・WebAuthn実装の基礎Passkeys・WebAuthn実装の基礎｜FIDO2・Resident Key・@simplewebauthn/server
JWTのデバッグ方法JWTのデバッグ方法｜トークンの中身を安全に確認する

まとめ

CORSエラーはサーバー側の設定で解決するのが正攻法です。バックエンドを触れない場合はProxy機能を使いましょう。

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

APIのレスポンスを整形して確認できます

試す