获取 POST 请求中的空主体

Question

我正在为 Javascript 中的获取 API 而苦苦挣扎。当我尝试使用 fetch 方法将内容发布到我的服务器时，请求正文包含一个空数组。但是当我使用 Postman 时，它就起作用了。这是我在 Node.js 中的服务器端代码：

 const express = require('express')
const app = express()
const port = 3000

app.use(express.json())
app.post('/api', function (req, res) {
    console.log(req.body)
})
app.listen(port)

这是我的客户端代码：

 fetch('http://"theserverip":3000/api', {
    method: 'POST',
    headers: { "Content-Type": "application/json" },
    mode: 'no-cors',
    body: JSON.stringify({
        name: 'dean',
        login: 'dean',
    })
})
.then((res) => {
    console.log(res)
})

问题是 req.body 在服务器端是空的。

原文由 Trietch 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是

mode: 'no-cors'

从 文档…

防止方法是 HEAD、GET 或 POST 以外的任何内容， 并且标题不是 简单标题 以外的任何内容

简单的 内容类型标题限制允许

• text/plain ,
• application/x-www-form-urlencoded 和
• multipart/form-data

这会导致您精心制作的 Content-Type: application/json 标头变为 content-type: text/plain （至少在通过 Chrome 测试时）。

由于您的 Express 服务器需要 JSON，因此它不会解析此请求。

我建议省略 mode 配置。这使用默认的 "cors" 选项代替。

---

由于您的请求并不 简单，您可能希望将一些 CORS 中间件 添加到您的 Express 服务器。

另一个（有点老套）选项是告诉 Express 将 text/plain 请求解析为 JSON。这允许您将 JSON 字符串作为简单请求发送，这也可以避免飞行前 OPTIONS 请求，从而降低整体网络流量……

 app.use(express.json({
  type: ['application/json', 'text/plain']
}))

编辑：将结束括号添加到 app.use 最终代码块。

原文由 Phil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为了补充提到删除 mode: 'no-cors' 选项的优秀答案，如果您不想向 Express 添加 CORS 中间件，您可能只想处理 OPTIONS 下的“飞行前”请求 --- 块：

 app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // Add other headers here
  res.setHeader('Access-Control-Allow-Methods', 'POST'); // Add other methods here
  res.send();
});

这里的另一个不错的答案： https ://www.vinaygopinath.me/blog/tech/enable-cors-with-pre-flight/

希望这可以帮助！

原文由 Philippe Sultan 发布，翻译遵循 CC BY-SA 4.0 许可协议