fetch POST 请求中的空主体

Question

我正在努力处理 Javascript 中的提取 API。当我尝试使用 fetch 方法向我的服务器发送 POST 某些内容时，请求正文包含一个空数组。但是当我使用 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 在服务器端是空的。

Answer 1

问题是

mode: 'no-cors'

来自 documentation...

Prevents the method from being anything other than HEAD, GET or POST, and the headers from being anything other than simple headers

简单content-typeheader限制允许

text/plain,
application/x-www-form-urlencoded，以及
multipart/form-data

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

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

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

因为您的请求不是 simple, you'll probably want to add some CORS middleware 您的 Express 服务器。

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

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

编辑：在 app.use 最终代码块中添加了结束括号。

Answer 2

请参阅文档 mode，no-cors 模式仅发送简单 headers。因此 content-Type 被更改为 text/html; 而不是 application/json 因此您的服务器无法识别 body 格式并且 return 为空。

删除 mode: 'no-cors', 你应该没问题。

Answer 3

为了补充提到删除 mode: 'no-cors' 选项的优秀答案，如果您不想向 Express 添加 CORS middleware，您可能只想处理 "pre-flight" 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/

希望对您有所帮助！

Answer 4

none 似乎对我有用我使用中间件

解决了这个问题

app.use(restify.plugins.bodyParser());

或

app.use(multer().array())

Answer 5

上面的许多答案都没有解决我的问题，所以任何运行遇到这个问题的人可能需要做我需要做的事情，并使他们的 app 能够阅读 JSON 在正文中，因为默认情况下应用程序无法执行此操作，这就是导致空正文的原因

我通过添加解决了这个问题：

app.use(bodyParser.json());

POST/PUT requests send the body 添加这一行后没问题

从技术上讲，bodyParser 模块已被弃用，因此这不是最理想的解决方案，但如果将以上行添加到您的代码中使其正常工作，那么您至少知道您的问题出在路上您的应用程序可以 parse/read JSON 在 body

中

fetch POST 请求中的空主体

Empty body in fetch POST request

javascript

http

node.js

cors

fetch-api