Fetch调用数据无法传递：前端POST请求端点接收不到数据问题

这种情况我之前也碰到过！Postman能正常跑但前端Fetch不行，十有八九是请求头或请求体的格式没匹配后端预期，我给你梳理几个必查的修复点：

1. 一定要手动设置Content-Type请求头 #

Postman发送JSON请求时会自动帮你加上Content-Type: application/json，但Fetch默认不会加这个头。如果你的后端是按JSON格式解析请求体，这一步绝对不能少：

return fetch('http://localhost:8080/board/', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${authToken}`,
    'Content-Type': 'application/json' // 关键！必须补上这个
  },
  // ...后续代码
})

2. 请求体必须序列化为JSON字符串 #

你代码里的body部分没写完，要注意：不能直接把JS对象传给body，必须用JSON.stringify()转成字符串格式，不然后端根本识别不了：

body: JSON.stringify({ name, user_id }) // 把你的数据对象转成JSON字符串

给你贴个完整的修正后代码参考：

export const createBoard = (name, user_id) => (dispatch, getState) => {
  const authToken = getState().authToken;
  console.log(`IN ACTION: ${name}${user_id}`);
  return fetch('http://localhost:8080/board/', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${authToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name, user_id })
  })
  .then(response => response.json())
  .then(data => {
    dispatch({ type: 'CREATE_BOARD_SUCCESS', payload: data });
  })
  .catch(error => {
    dispatch({ type: 'CREATE_BOARD_FAILURE', payload: error });
  });
};

额外排查小技巧 #

如果还是不行，打开浏览器开发者工具的Network标签，查看你发送的POST请求的「Request Headers」和「Request Payload」，和Postman里的请求做对比——哪里不一样，问题就在哪里！

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