React中使用formData作为GET请求参数时出现网络错误如何解决

错误原因 #

• axios的get方法传参格式错误：axios.get的第二参数仅支持传入配置对象，不支持直接传请求体，你当前把FormData放到了第二参数的位置，不符合axios的调用规范，导致请求构造异常触发网络错误。
• HTTP协议层面GET请求默认不支持携带请求体：绝大多数服务端、反向代理服务都会直接丢弃GET请求的body内容，就算你强行构造带body的GET请求，后端也无法正常接收参数，属于协议使用错误。
• 额外的错误用法：即便你用POST请求传FormData，也不需要手动设置Content-Type: multipart/form-data，axios会自动生成带边界标识的请求头，手动设置反而会丢失边界参数导致服务端解析失败。

解决方案 #

方案一：保留GET请求（适合参数仅为普通键值对的场景） #

把参数放到配置对象的params字段，axios会自动把参数拼接到URL的查询字符串中，无需使用FormData：

axios
  .get('<APIURL>', {
    params: {
      userid: '1'
    }
  })
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

方案二：改用POST请求（适合必须传FormData的场景） #

如果后端要求必须接收FormData格式的参数，把请求方法换成POST即可，axios会自动处理FormData对应的请求头：

var formdata = new FormData()
formdata.append('userid', '1')

axios
  .post('<APIURL>', formdata)
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

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