ツール一覧

ツール一覧へ →

ローカル開発で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無効化のブラウザ拡張を使う方法もあります。本番では絶対に使わないでください。

まとめ

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

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

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

試す