使用whatwg-fetch发起POST请求返回200但无数据提交问题

嘿，我之前也踩过这个一模一样的坑！请求返回200说明网络连接没问题，但服务器就是拿不到提交的数据，大概率是前端请求格式不对或者服务器没配置请求体解析这俩原因，咱们一步步排查：

1. 先检查你的前端fetch请求配置 #

whatwg-fetch可不像是jQuery的ajax那样会自动帮你处理数据格式，你得手动把数据序列化，还得设置正确的Content-Type头，不然服务器根本认不出你发的是什么：

如果是发JSON数据（最常用的情况），前端得这么写： #

fetch('/promo', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 这个头必须加！
  },
  body: JSON.stringify({ // 把JS对象转成JSON字符串
    imgUrl: '你的图片地址',
    name: '促销名称',
    description: '促销描述',
    category: '分类'
  })
})
.then(res => res.json())
.catch(err => console.log('请求出错：', err));

如果是发表单数据（比如上传文件或者传统表单），就用FormData： #

const formData = new FormData();
formData.append('imgUrl', '你的图片地址');
formData.append('name', '促销名称');

fetch('/promo', {
  method: 'POST',
  body: formData
})
// 后续处理逻辑

2. 再检查服务器端的请求体解析配置 #

看你的代码应该是用Express框架吧？如果没配置解析JSON或者表单数据的中间件，request.body会直接是undefined，那你自然拿不到数据：

如果前端发的是JSON数据，在服务器里加这个： #

// Express 4.16版本之后自带了JSON解析，不用额外装body-parser
app.use(express.json());

如果前端发的是FormData，就加这个： #

app.use(express.urlencoded({ extended: true }));

3. 最后验证服务器的接收逻辑 #

你可以先在服务器里直接打印request.body，看看是不是空的：

app.post('/promo', function(request, response) {
  response.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  console.log('收到的请求体：', request.body); // 先看这个输出！
  var promo = new PromoItem();
  promo.imgUrl = request.body.imgUrl;
  promo.name = request.body.name;
  // ...剩下的代码
});

要是request.body是undefined，就回到前两步排查；要是有数据但字段不对，就检查前端发的字段名和后端写的是不是完全一致（比如大小写、拼写别错了）。

对了，你的CORS设置可以用cors中间件来简化，不过这不是导致数据没提交的原因，只是个小建议~

内容的提问来源于stack exchange，提问作者IceClimberMx