Express中POST接口req.body始终为空的问题求助

嘿，我一眼就揪出问题所在啦——你客户端的fetch请求里用了mode: 'no-cors'，这就是导致服务端拿不到请求体的核心原因！

问题根源 #

当你设置mode: 'no-cors'时，浏览器会强制限制请求的行为：

• 无法发送Content-Type: application/json这类非简单请求头
• 服务器返回的响应你也无法读取（哪怕你只是发送数据，请求头已经被限制了）
• 最终你的JSON请求体根本没被正确发送到服务端，所以req.body是空对象

正确的解决步骤 #

1. 修正客户端的fetch请求

首先移除mode: 'no-cors'，另外Access-Control-Allow-Origin是服务器返回给客户端的响应头，不是客户端要发送的！修改后的客户端代码如下：

await fetch('http://localhost:8080/api/getUsername', {
    headers:{
        'Content-Type': 'application/json',
        'Cache-Control': 'no-cache'
    },
    method: 'POST',
    body: JSON.stringify({ hello: 'world' })
});

2. 在Express服务端配置CORS支持

现在跨域请求不再用no-cors模式，所以需要服务器允许跨域请求。最方便的方式是用cors中间件：

• 先安装依赖：npm install cors
• 然后修改服务端代码：

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors'); // 引入cors中间件

const app = express();

app.use(cors()); // 启用CORS，允许所有来源的请求
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(express.static('dist'));

app.post('/api/getUsername', (req, res) => {
    console.log(req.headers);
    console.log(req.body); // 现在应该能拿到 { hello: 'world' } 啦！
    res.status(200).send();
});

app.listen(8080, () => console.log(`Listening on port ${8080}!`));

额外方案：手动设置CORS响应头 #

如果你不想用cors中间件，也可以手动添加响应头来支持跨域：

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

不过cors中间件更灵活，能应对复杂的跨域场景，还是推荐使用它。

现在再测试一下，你的req.body应该就能正常获取到客户端发送的JSON数据了！

内容的提问来源于stack exchange，提问作者s-leg3ndz