微信小程序使用POST请求后台数据失败，报错为Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported

 

 

文章目录

 错误代码

后台接口

微信小程序请求方式

错误原因

 解决方法

正确代码

 另外，打印返回的结果对象res时，不能使用字符串拼接，否则只能得到[Object object] 巨坑！

参考文章

---

 错误代码

后台接口

    /**
     * 隐患随手拍 我的上报
     * @param params
     * @return
     */
    @PostMapping("/list")
    @ResponseBody
    public List<WxHdVo> getHdVoListByWxUser(@RequestBody Map<String, String> params) {
        List<WxHdVo> hdVos = new LinkedList<>();
        System.out.println(params.get("sbr"));
        List<ScHd> scHds = scHdService.selectScHdForWx(params.get("sbr"), params.get("fcqk"));
        System.out.println(scHds.size());
        for (ScHd scHd : scHds) {
            List<ScHdImg> scHdImgs = scHdImgService.selectScHdImgListByHdId(scHd.getId());
            hdVos.add(new WxHdVo(scHd.getSbr(), scHd.getSbsj(), scHd.getYhdd(), scHd.getYhbw(), scHd.getYhms(), scHdImgs,
                    scHd.getZgzrdwMc(), scHd.getZgcs(), scHd.getZgqx(), scHd.getZgqk(), scHd.getFcdwMc(), scHd.getFcqk(), scHd.getYhxcrq(), scHd.getBz()));
        }
        return hdVos;
    }
}

微信小程序请求方式

         wx.request({
            url: 'http://localhost:8081/wx/hd/list',
            method:"POST",
            data:{
              "sbr": "gy",
              "fcqk": "2"    
            },
            header:{'content-type': 'application/x-www-form-urlencoded'}, 
            success:res=>{
                console.log(res);
            }
          })

错误原因

• 第一，请求的数据类型是JSON格式，而后台接收前端小程序传来的数据类型是JSON字符串，后端的Spring无法识别与转换这个JSON格式的数据
• 第二，小程序请求头的Content-Type值与请求体data数据之间不匹配导致请求出错。

 解决方法

因此我们将小程序请求头和data请求体改成相匹配的即可

• 第一步，使用JSON.stringfy()将JSON对象转换成JSON字符串来传递
• 第二步，将请求头中content-type值改为'application/json'

 

---

 

正确代码

小程序请求方式

     wx.request({
            url: 'http://localhost:8081/wx/hd/list',
            method:"POST",
            data:JSON.stringify({
              "sbr": "gy",
              "fcqk": "2"    
            }),
          header:{'content-type': 'application/json'},
            success:res=>{
                console.log(res);
            }
          })
    },

这样修改后便成功拿到了后端接口的数据！！！

---

 另外，打印返回的结果对象res时，不能使用字符串拼接，否则只能得到[Object object] 巨坑！

 

---

 

参考文章

Jmeter发送post请求报错Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supportedhttps://www.cnblogs.com/justyoutiao/p/11385964.html微信小程序和springboot后台交互，小程序如何传递参数后台如何接收，和一些报错问题https://blog.csdn.net/weixin_45862170/article/details/114600756?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167534032516800225538724%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167534032516800225538724&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-114600756-null-null.142^v72^insert_down4,201^v4^add_ask&utm_term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8Fspringboot%E5%89%8D%E5%90%8E%E7%AB%AF%E4%BA%A4%E4%BA%92&spm=1018.2226.3001.4187微信小程序以post方式提交https://blog.csdn.net/lff1123/article/details/80254282?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167534645216800225552748%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167534645216800225552748&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-80254282-null-null.142^v72^insert_down4,201^v4^add_ask&utm_term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%8F%91%E9%80%81post%E8%AF%B7%E6%B1%82&spm=1018.2226.3001.4187

---

小程序坑真的多，故分享解决方案，让更多的人少走弯路。