当GET请求和Postman请求正常工作时，POST请求上的Nextjs出现CORS错误

70gysomp 于 2023-06-22 发布在 Postman

关注(0)|答案(1)|浏览(166)

我正在尝试访问一个用Nextjs编写的RESTful API。该API与 Postman 或 curl 配合良好。但是，我在 POST 请求上得到以下错误：

Access to XMLHttpRequest at 'http://localhost:3000/api/articles' from origin 'http://localhost:5173' 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.

GET* 请求按预期工作。

我已经在响应中设置了所有必要的CORS报头：

res.headers.append("content-type", "application/json")
res.headers.append("Access-Control-Allow-Origin", req.headers.get('origin'))
res.headers.append("Access-Control-Allow-Methods", "GET, POST, PATCH, DELETE")
res.headers.append("Access-Control-Allow-Headers", "Content-Type")

我检查了很多次，所有的 * url * 都是正确的（包括上面代码段中的req.headers.get('origin')）。也许我错过了一些重要的东西。
首先，我尝试通过 Postman 访问API，一切都按预期工作。然后我实现了 GET 请求，仍然没有问题。但是我不能让 POST 请求工作。

设置

API使用Nextjs 13.4.4编写，客户端应用使用react 18编写。我正在使用axios向客户端发出请求。

next.js

来源：https://stackoverflow.com/questions/76450743/cors-error-with-nextjs-on-post-requests-while-get-requests-and-postman-requests

1条答案

按热度按时间

pxq42qpu1#

所以找到了解决方案。
Web浏览器向服务器发送 CORS 预检，以查看是否理解 CORS 协议。印前检查只获取OPTIONS方法返回的任何内容。在我的例子中，我只定义了POST和GET路由处理程序，只需要一个OPTIONS处理程序来将必要的CORS头发送到preflight。下面是一个例子：

export function OPTIONS(req: NextRequest): NextResponse<any> {
  const res = new NextResponse();

  if (isWhitelistOrigin(req)) {
    res.headers.append(
      "Access-Control-Allow-Origin",
      req.headers.get("origin")!
    );
  }
  res.headers.append("Content-Type", "application/json");
  res.headers.append("Allow", "GET,POST,OPTIONS");
  res.headers.append("Access-Control-Allow-Methods", "GET,OPTIONS,POST");
  res.headers.append(
    "Access-Control-Allow-Headers",
    "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Authorization, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"
  );

  return res;
}

isWhitelistOrigin是一个helper函数，如果我想允许请求源访问API，则返回true，否则返回false。

赞(0）回复(0）举报 2023-06-22

我来回答

当GET请求和Postman请求正常工作时，POST请求上的Nextjs出现CORS错误

设置

1条答案

相关问题

热门标签

最新问答