Problème NextJs CORS

Question

J'ai une application Next.js hébergée sur Vercel (www.example.com) qui nécessite un backend hébergé sur un serveur différent de celui api.example.com (api.example.com) pour communiquer. . L'API Web principale .NET est configurée pour autoriser CORS, mais mon Next.js continue de se plaindre qu'il ne peut pas afficher les données lorsque je les reçois à l'aide d'AXIOS, car la réponse ne contient pas l'en-tête Allow-Cors :

L'accès à XMLHttpRequest sur 'https://api.example.com' depuis l'origine 'http://www.example.com' est bloqué par la stratégie CORS : La réponse à la demande de contrôle en amont a échoué lors de la vérification du contrôle d'accès : l'option 'Access -Control-Allow-Origin' n'existe pas sur la ressource demandée

Lorsque je l'exécute localement en utilisant npm run dev, cela fonctionne bien, mais lorsque je le construis et que j'exécute ensuite npm run start

;

Est-ce que quelqu'un sait comment résoudre les problèmes de cors en production ?

Answer 1

Si tu veux 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

J'ai trouvé la solution ici :

En gros, il me suffit d'ajouter un fichier next.config.js dans le répertoire racine et d'ajouter ce qui suit :

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