使用 next.js 处理 cors

Posted 2023-02-27

【中文标题】使用 next.js 处理 cors

【英文标题】：Handling cors with next.js

【发布时间】：2022-01-18 01:38:50

【问题描述】：

我使用 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(...)

我什至在我的 next.config.js 中添加了this：

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,

但我收到此错误：

从 'https://backendname.herokuapp.com/data' 获取获取权限 来源“https://frontendname.netlify.app”已被 CORS 阻止 策略：对预检请求的响应未通过访问控制 检查：没有“Access-Control-Allow-Origin”标头出现在 请求的资源。如果不透明的响应满足您的需求，请将 请求模式为“no-cors”以获取禁用 CORS 的资源。

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

【参考方案1】：

问题

https://frontendname.netlify.app/ 不是 origin。因为 CORS 中间件观察到之间的不匹配

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

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

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

解决方案

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

【讨论】：

我把它改成了res.setHeader("Access-Control-Allow-Origin", "https://frontendname.netlify.app");，但还是报同样的错误

@cakelover 您是否删除了next.config.js 中的尾部斜杠？