NextJs CORS-Problem

Question

Ich habe eine Next.js-Anwendung, die auf Vercel (www.example.com) gehostet wird, für deren Kommunikation ein Backend erforderlich ist, das auf einem anderen Server als api.example.com (api.example.com) gehostet wird . Die .NET Core-Web-API ist so konfiguriert, dass sie CORS zulässt, aber mein Next.js beschwert sich ständig darüber, dass es die Daten nicht anzeigen kann, wenn ich sie mit AXIOS erhalte, weil in der Antwort der Allow-Cors-Header fehlt:

Der Zugriff auf XMLHttpRequest unter „https://api.example.com“ vom Ursprung „http://www.example.com“ wird durch die CORS-Richtlinie blockiert: Antwort auf die Preflight-Anfrage ist bei der Zugriffskontrollprüfung fehlgeschlagen: Der „Access Der Header „-Control-Allow-Origin“ ist auf der angeforderten Ressource nicht vorhanden

Wenn ich es lokal mit npm run dev ausführe, funktioniert es einwandfrei, aber wenn ich es erstelle und dann npm run start

ausführe;

Weiß jemand, wie man CORS-Probleme in der Produktion lösen kann?

Answer 1

如果你想在 nextjs 中使用 cors 库，我为其创建了一个库 nextjs-cors。

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

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

import NextCors from 'nextjs-cors';

async function handler(req, res) {
   // Run the cors middleware
   // nextjs-cors uses the cors package, so we invite you to check the documentation https://github.com/expressjs/cors
   await NextCors(req, res, {
      // Options
      methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'],
      origin: '*',
      optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
   });

   // Rest of the API logic
   res.json({ message: 'Hello NextJs Cors!' });
}

Answer 2

我在此处找到了解决方案：

基本上，我只需要在根目录中添加一个 next.config.js 文件并添加以下内容：

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