Next.js 动态 api 页面无法响应带有 Content-Type=application/json headers 的 post 请求

Question

我在具有自定义路由的自定义 Express 服务器上有一个 next.js React 应用程序运行。我一个人在做这个项目，但我希望在某个时候我可能有一个合作者，所以我的主要目标实际上只是清理一切并使一切更清晰。

因此，我一直在尝试将尽可能多的 Express 路由逻辑移至内置 Next.js api routes。我还试图用 axios 请求替换所有 fetch 调用，因为它们看起来不那么冗长。

// current code
const data = await fetch("/api/endpoint", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ foo: "bar" })
}).then(x => x.json());

// what I'd like
const data = await axios.post( "/api/endpoint", { foo: "bar" });

我遇到的问题是，一旦 body 中有 JSON 数据，动态 next.js api 路由就会停止。我什至没有收到错误，请求只是卡住了 "pending" 并且等待承诺从未解决。

我从这些调用中得到响应，但我无法传递我需要的数据：

// obviously no data passed
const data = await axios.post( "/api/endpoint");

// req.body = {"{ foo: 'bar' }":""}, which is weird
const data = await axios.post( "/api/endpoint", JSON.stringify({ foo: "bar" })); 

// req.body = "{ foo: 'bar' }" if headers omitted from fetch, so I could just JSON.parse here, but I'm trying to get away from fetch and possible parse errors
const data = await fetch("/api/endpoint", {
  method: "POST",
  // headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ foo: "bar" })
}).then(x => x.json());

如果我尝试调用 axios.post("api/auth/token", {token: "foo"})，请求就会卡在待处理状态并且永远不会得到解决。

Chrome 网络面板为我提供了有关停滞请求的以下信息：

General
  Request URL: http://localhost:3000/api/auth/token
  Referrer Policy: no-referrer-when-downgrade

Request Headers
  Accept: application/json, text/plain, */*
  Accept-Encoding: gzip, deflate, br
  Accept-Language: en-US,en;q=0.9,es;q=0.8
  Connection: keep-alive
  Content-Length: 26
  Content-Type: application/json;charset=UTF-8
  Cookie: token=xxxxxxxxxxxxxxxxxxxx; session=xxxxxxxxxxxxxxxxxxxxxxx
  Host: localhost:3000
  Origin: http://localhost:3000
  Referer: http://localhost:3000/dumbtest
  Sec-Fetch-Dest: empty
  Sec-Fetch-Mode: cors
  Sec-Fetch-Site: same-origin
  User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36

Request Payload
  {token: "foo"}

我已经尝试调查可能导致此问题的原因，一切似乎都表明预检请求存在问题，但是，由于这些与 CORS 政策有关，我不明白为什么我会遇到那些。我正在从 http://localhost:3000 向 http://localhost:3000/api/auth/token 发出请求。

即便如此，我确实尝试添加 cors 中间件，如 next.js example 所示，但这并没有什么不同。据我所知，该请求甚至从未到达服务器 - 我在处理程序的第一行有一个 console.log 调用，但它从未被这些请求触发。

我有什么明显的遗漏吗？这感觉应该是一个简单的切换，但我花了最后一天半的时间试图解决这个问题，但我尝试的每个解决方案都达到了相同的点 - 盯着我的灰色待处理请求“网络”选项卡和控制台未报告任何错误或任何内容。

Answer 1

经过几个小时的搜索，我找到了答案here

事实证明，由于我在我的快速服务器中使用了 bodyParser 中间件，我不得不通过在我的文件顶部添加以下内容来禁用 Next 主体解析：

export const config = {
  api: {
    bodyParser: false,
  },
}

Next.js 动态 api 页面无法响应带有 Content-Type=application/json headers 的 post 请求

Next.js dynamic api pages fail to respond to post requests with Content-Type=application/json headers

preflight

axios

next.js