Isu CORS NextJs

Question

Saya mempunyai aplikasi Next.js yang dihoskan pada Vercel (www.example.com) yang memerlukan bahagian belakang yang dihoskan pada pelayan yang berbeza daripada api.example.com (api.example.com NET Core Web API untuk berkomunikasi). . Api web teras .NET dikonfigurasikan untuk membenarkan CORS, tetapi Next.js saya terus merungut bahawa ia tidak dapat memaparkan data apabila saya mendapatkannya menggunakan AXIOS kerana responsnya tiada pengepala allow-cors:

Akses kepada XMLHttpRequest di 'https://api.example.com' dari asal 'http://www.example.com' telah disekat oleh dasar CORS: Respons kepada permintaan prapenerbangan gagal semakan kawalan akses : Pengepala 'Access-Control-Allow-Origin' tidak wujud pada sumber yang diminta

Apabila saya menjalankannya secara setempat menggunakan npm run dev ia berfungsi dengan baik, tetapi apabila saya membinanya dan kemudian menjalankan npm run start

;

Adakah sesiapa tahu cara menyelesaikan isu kors dalam pengeluaran?

Answer 1

Jika anda mahu 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

Saya jumpa penyelesaiannya di sini:

Pada asasnya, saya hanya perlu menambah fail next.config.js dalam direktori root dan tambah yang berikut:

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