Postman调用API成功，React中Fetch返回500内部服务器错误求助

嘿，我立刻就发现了问题所在！你遇到的这个500错误，根源在于fetch的body参数格式不对——Postman会自动帮你把JSON对象转换成字符串格式，但React里的fetch不会做这个自动转换，你直接传了JavaScript对象，后端根本解析不了，所以返回了服务器错误。

具体问题点 #

看你的请求配置：

{
  method: "POST",
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  body: { ... } // 这里直接传了JS对象，而不是JSON字符串！
}

虽然你设置了Content-Type: application/json，但body必须是JSON字符串，而不是原始的JavaScript对象。Postman在发送请求时，会自动把你输入的JSON对象转为字符串，但fetch不会帮你做这个步骤，所以后端接收到的是无法解析的内容，导致500错误。

修复方案 #

只需要把body用JSON.stringify()包裹，把JavaScript对象转换成符合要求的JSON字符串即可：

修正后的请求配置

{
  method: "POST",
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  body: JSON.stringify({ 
    "value": {
      "RequestType":1,
      "Dependencies":[],
      "Priority":1,
      "RequestLocation":"some string",
      "RequestJSON": "some string",
      "NoCache":true,
      "PostNow":true,
      "Authentication": {
        "Email":"string",
        "Device": {
          "Name":"string",
          "UniqueDeviceId":"string",
          "AppVersion":"string",
          "AppType":1, // 注意这里要写具体数字，不能用int关键字
          "Devicestatus":1
        }
      }
    }
  })
}

完整修正后的FetchData函数

const FetchData = async (url , request) => {
  return await fetch(url, request)
    .then(async function(res) {
      if (res.ok) console.log("OK: ", await res.json())
      else console.log("NOT OK: ", await res.text())
    });
}

额外验证步骤 #

你可以打开浏览器的开发者工具 -> Network标签，发送请求后查看该请求的Payload，确认发送的是不是正确的JSON字符串，和Postman里的请求体做对比，这样就能彻底确认问题是否解决啦。

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