使用 next.js 处理 cors

Question

我使用 netlify 作为前端，使用 heroku Next.js 作为后端

在前端，我发送这样的获取请求：

fetch(`https://backendname.herokuapp.com/data`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({"category":"_main"})
  }).then(...);

在我的 pages/api/data.js 后端：

export default function handler(req, res) {
    req.body=JSON.parse(req.body);

    res.setHeader("Access-Control-Allow-Origin", "https://frontendname.netlify.app/");
    res.setHeader('Access-Control-Allow-Methods', 'POST');
    res.setHeader(
      'Access-Control-Allow-Headers',
      'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
    )
    if(req.method!='POST')
     return res.end();

    res.json({...})

}

我什至将 this 添加到我的 next.config.js:

module.exports = {
  async headers() {
    return [
      {
        // matching all API routes
        source: "/api/:path*",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "https://frontendname.netlify.app/" },
          { 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" },
        ]
      }
    ]
  },
  reactStrictMode: true,
}

但我得到这个错误：

Access to fetch at 'https://backendname.herokuapp.com/data' from origin 'https://frontendname.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我正在尝试不使用任何第三方软件包，例如问题

Answer 1

问题

https://frontendname.netlify.app/ 是 而不是 和 origin。因为 CORS 中间件观察到

之间不匹配

您请求的实际来源 (https://frontendname.netlify.app)，以及
您在 CORS 配置中允许的“来源”(https://frontendname.netlify.app/)，

它没有设置 Access-Control-Allow-Origin 响应 header，这导致预检失败。

您似乎还在多个地方设置了 CORS headers，这不是一个好主意。

解决方案

删除 Access-Control-Allow-Origin header 中设置的值中的尾部斜杠，并且不要在响应中指定重复的 CORS header。

使用 next.js 处理 cors

Handling cors with next.js

javascript

heroku

next.js

cors

netlify

问题

解决方案