微信小程序 wx.request 返回 400 bad request 解决方法

作者: 科技微讯

日期:

我写的小程序 "水果机大全" 用了我自己搭建的一个 api, 使用 wx.request 从这个 api 请求数据, 竟然返回 400 (Bad Request).

官方给出的 wx.request 的使用方法是这样的:

wx.request({
  url: "some url",
  data: {
    x: "",
    y: "",
  },
  header: {
    "content-type": "application/json",
  },
  success(res) {
    console.log(res.data)
  },
})

搜了一下, 大部分小伙伴建议把 'application/json' 修改为 'json', 我试了还是返回 400, 可能有人和我一样改了 json 还是不行, 所以分享一下我的方法.

我登录 api 的服务器查了一下日志, 当我的小程序发出请求时, 服务器返回 typeerror: invalid media type, 看来确实是 content-type 设置不当造成的.

我的 api 格式大概是 https://api.kejiweixun.com/something?key=value, 下面是我一开始请求数据的方式:

wx.request({
  url: "https://api.kejiweixun.com/something?key=value",
  success(res) {
    console.log(res.data)
  },
})

刚开始我没有写 header, 但因为 'content-type': 'application/json' 是默认值, 不设置 header 就默认采用这个值, 返回 400 说明 application/json 肯定不对.

最后我改成了这样:

wx.request({
  url: "https://api.kejiweixun.com/something",
  data: {
    x: "key",
    y: "value",
  },
  header: {
    "content-type": "application/x-www-form-urlencoded",
  },
  success(res) {
    console.log(res.data)
  },
})

?key=value 挪到 data 中, 然后把 content-type 设置为 application/x-www-form-urlencoded, 其实设置为 multipart/form-data 也能正常请求数据, 但除非 data 是大体积的 binary data, 否则用前者更好.