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?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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!' }); }Saya jumpa penyelesaiannyadi 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*', }, ] }, };