☰

NextJs CORSの問題 質問する

tag-icon • tag-icon reactjs cors next.js
NextJs CORSの問題 質問する

私はVercelでホストされているNext.jsアプリを持っています参考文献これは、api.example.com の別のサーバーでホストされているバックエンドの .NET Core Web API と通信する必要があります。.NET Core Web API は CORS を許可するように構成されていますが、AXIOS を使用してデータを取得すると、応答に allow-cors ヘッダーがないため、Next.js からデータが表示されないというエラーが返されます。

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

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

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

ベストアンサー1

解決策を見つけたここ:

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

// next.config.js
module.exports = {
    async rewrites() {
        return [
          {
            source: '/api/:path*',
            destination: 'https://api.example.com/:path*',
          },
        ]
      },
  };

おすすめ記事