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 の問題を解決する方法を知っている人はいますか?
nextjs
で
corsライブラリを使用したい場合は、そのためのライブラリ
nextjs-corsを作成しました。
https://www.npmjs.com/nextjs-cors
https://github.com/yonycalsin/nextjs-corsリーリー
解決策を見つけましたここ:
基本的には、ルート ディレクトリに next.config.js ファイルを追加し、次の内容を追加するだけです:
リーリー