Question

我正在努力使用javascript中的fetch API。当我尝试通过获取将某些内容发布到服务器时，请求正文为空数组。但是当我使用邮递员的时候... 这是我在NodeJS中的服务器代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

这是我的客户：

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)

问题在于，在SERVER端，req.body为空。有人能帮我吗？谢谢！

Answer 1

问题是

mode: 'no-cors'

从documentation ...

防止该方法使用除HEAD，GET或POST之外的任何内容，防止该标头使用除simple headers以外的任何内容

简单内容类型标头限制允许

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

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

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

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

由于您的请求不是simple，因此您可能想向您的Express服务器添加一些CORS middleware。

另一个（略为hacky）的选项是告诉Express将text/plain请求解析为JSON。这样，您就可以将JSON字符串作为简单请求发送，也可以避免进行预检OPTIONS请求，从而降低总体网络流量...

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

Answer 2

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

删除mode: 'no-cors',，就可以了。

Answer 3

如果您想使用获取获得回复，请考虑使用 res.send ：

    app.post('/api', function (req, res) {
        res.send(req.body)
    })

Answer 4

要补充提到删除mode: 'no-cors'选项的出色答案，并且如果您不想在Express中添加CORS middleware，则可能只想处理以下内容中的“飞行前”请求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 5

似乎没有一个对我有用，我使用中间件解决了这个问题

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

或

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

Answer 6

上述许多答案都没有解决我的问题，因此遇到此问题的任何人都可能需要做我需要做的事情，并使他们的 app 能够读取正文中的 JSON，因为默认情况下，应用程序不能这样做，这就是导致空体的原因

我通过添加以下内容解决了这个问题：

app.use(bodyParser.json());

添加这一行后POST/PUT请求发送正文没有问题

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

提取请求后的空主体

6 个答案: