[Next.js] API リクエストの CORS エラーを回避する

こんにちは、よしお (@yoshio__25) です。 Webフロントエンジニアは皆さん、下のエラーを一度は目にしたことがあるのではないでしょうか。 CORSとは MDN に以下のように記述されています。 オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。 つまり上のエラーメッセージは、異なるオリジンへのアクセスをしようとしたときに、セキュリティ上の理由からそのポリシーに反しているため、リクエストをブロックした旨を伝えています。 このポリシーはもちろん製品の開発時にも適用されます。 つまり開発用の localhost サーバーを立てて、そこから開発