NextJs CORS の問題

Question

Vercel (www.example.com) でホストされている Next.js アプリケーションでは、api.example.com (api.example.com) とは別のサーバーでホストされているバックエンドが必要です。通信するには NET Core Web API 。 .NET Core Web API は CORS を許可するように構成されていますが、応答にallow-cors ヘッダーが欠落しているため、AXIOS を使用してデータを取得すると、Next.js がデータを表示できないという苦情を繰り返します。 <ブロック引用>

オリジン 'http://www.example.com' から 'https://api.example.com' の XMLHttpRequest へのアクセスは CORS ポリシーによってブロックされました: プリフライト リクエストへの応答はアクセス制御チェックに失敗しました: 'Access-Control-Allow-Origin' ヘッダーが要求されたリソースに存在しません

npm run dev を使用してローカルで実行すると正常に動作しますが、ビルドしてから npm run start

を実行すると、正常に動作します。

本番環境で cors の問題を解決する方法を知っている人はいますか?

Answer 1

nextjs で cors ライブラリを使用したい場合は、そのためのライブラリ nextjs-cors を作成しました。

https://www.npmjs.com/nextjs-cors

https://github.com/yonycalsin/nextjs-cors リーリー

Answer 2

解決策を見つけました ここ:

基本的には、ルート ディレクトリに next.config.js ファイルを追加し、次の内容を追加するだけです:

リーリー