フロントエンド開発の壁「CORS policyエラー」の仕組みとサーバー別回避策

Next.jsやReactなどのモダンなフロントエンドフレームワークを使用して外部APIやバックエンドサーバーと通信しようとした際、ブラウザのコンソールに赤い文字で「has been blocked by CORS policy」と表示され、データが取得できなくなる致命的なエラーです。 【CORSとは何か？】 CORS（Cross-Origin Resource Sharing）は、ブラウザが持つ強力なセキュリティ機能です。デフォルトでは、あるドメイン（例：`http://localhost:3000`）で動いているWebサイトが、別のドメイン（例：`https://api.example.com`）のデータを勝手に読み取ることを禁止しています。これは、悪意のあるサイトがユーザーのブラウザを踏み台にして、銀行やSNSのAPIを勝手に叩く（CSRF攻撃など）のを防ぐための重要な仕組みです。 【具体的な解決手順】 このエラーは基本的に「ブラウザが通信をブロックしている」ため、フロントエンド（JavaScript）のコードをいじっても解決しません。データを提供する「バックエンド（API）側」で設定を変更する必要があります。 1. Express (Node.js) の場合 `cors` パッケージをインストールし、ミドルウェアとして登録するのが最も簡単です。 `npm install cors` を実行後、コード内で `app.use(cors({ origin: 'http://localhost:3000' }));` のように、許可するフロントエンドのURLを明示的に指定します。 2. Nginx / Apache (Webサーバー) の場合 サーバーの設定ファイルを開き、レスポンスヘッダに以下を追加します。 `Access-Control-Allow-Origin: *` （※ `*` はすべてのドメインを許可するという意味ですが、本番環境ではセキュリティリスクが高まるため、必ず自身のフロントエンドのドメイン名を指定してください） 3. 開発環境での一時的な回避策 (Next.jsのプロキシ機能) バックエンドのコードをいじれない（他社のAPIを使っている等）場合、Next.jsの `next.config.js` の `rewrites` 機能を使い、フロントエンド側でプロキシ（中継）サーバーを立てることで、ブラウザに「同じドメインと通信している」と錯覚させることが可能です。 CORSはエラーではなく「正しいセキュリティの挙動」です。仕組みを理解して適切なヘッダーを付与することが開発の第一歩となります。