在 NextJS 中使用 Axios 时缺少 CORS 标头

Question

我正在使用带有 NextJS 前端的 NestJS 后端，两者都是单独托管的。

NestJS 后端

我在后端启用了 CORS，如下所示：

app.enableCors({ credentials: true, origin: process.env.FRONTEND_URL });

当使用cors-test.codehappy.dev检查 CORS 标头时，一切看起来都很好。 所有标头都存在，并且access-control-allow-origin标头指向托管前端的正确域。

NextJS 前端

在 NextJS 前端，我使用 Axios 向后端发出请求（与上面使用的完全相同的 url）。但是，在创建请求时，Chrome 中的预检请求缺少所有 CORS 标头。 下面的 axios 实例是在需要 HTTP 请求时导入的。

import Axios from 'axios';

const api = Axios.create({
    baseURL: process.env.BACKENDURL,
    withCredentials: true
});

export default api;

控制台中的错误：

预检请求：

Answer 1

在next.config.js

module.exports = {
//avoiding CORS error, more here: https://vercel.com/support/articles/how-to-enable-cors
    async headers() {
        return [
          {
            // matching all API routes
            source: "/api/:path*",
            headers: [
              { key: "Access-Control-Allow-Credentials", value: "true" },
              { key: "Access-Control-Allow-Origin", value: "*" },
              { key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
              { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
            ]
          }
        ]
    },
}