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

Posted 2023-02-27

【中文标题】Next.js 动态 api 页面无法响应带有 Content-Type=application/json 标头的 post 请求

【英文标题】：Next.js dynamic api pages fail to respond to post requests with Content-Type=application/json headers

【发布时间】：2020-08-05 22:26:57

【问题描述】：

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

因此，我一直在尝试将尽可能多的 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" );

我遇到的问题是，一旦正文中有 JSON 数据，动态 next.js api 路由就会停止。我什至没有收到错误，请求只是卡在“待处理”状态，等待承诺从未解决。

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

// 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 调用，但这些请求从未触发它。

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

【参考方案1】：

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

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

export const config = 
  api: 
    bodyParser: false,
  ,