SpringBoot +Vue前后端分离项目报错：Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supporte

报错

Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

浏览器报错图片如下：

原因

我后台用@RequestBody来接收前端传过来的对象，如下：

public Object loginStatus(@Validated @RequestBody LoginDto loginDto, HttpSession session){
    
      //@RequestBody参数接受的数据格式为Json
        JSONObject jsonObject = new JSONObject();
        System.out.println(loginDto);
        QueryWrapper<Admin> wrapper = new QueryWrapper<>();
//        wrapper.eq("name", loginDto.getUsername());  //设置查询条件
//        wrapper.eq("password", loginDto.getPassword());
        HashMap<String, Object> map = new HashMap<>();
        map.put("name", loginDto.getUsername());
        map.put("password", loginDto.getPassword());
        wrapper.allEq(map);
        Admin admin = adminService.getOne(wrapper);
        if (!StringUtils.isEmpty(admin)){
    
      //如果不为空，说明用户存在，并且用户名密码正确
            jsonObject.put(Consts.CODE, 1);
            jsonObject.put(Consts.MSG, "登录成功!");
            session.setAttribute(Consts.NAME, loginDto.getUsername()); //将用户名存进session
            return jsonObject;
        }
        jsonObject.put(Consts.CODE, 0);
        jsonObject.put(Consts.MSG, "用户名或密码错误，登录失败");
        return jsonObject;
    }

而@RequestBody需要的参数格式是JSON类型，但是我前端在用axios发起请求的时候，参数格式设置的是：application/x-www-form-urlencoded，所以他会报错不支持这个格式。x-www-form-urlencoded是以键值对拼接的形式，如 name=abc&phone=123456，并不是json那样的json格式{"name":"abc","phone":"123456"}。

解决方法

一、后端解决

既然@RequestBody只能支持JSON格式的数据，那我们就不用@RequestBody来接受参数，我们可以换成以下几种形式接受参数：

@PostMapping("save")
public Result save(@RequestParam Map<String, Object> params) {
    
    
 
}

@@PostMapping("save")
public Result save(@RequestParam("name" String name), @RequestParam("password" String password)){
    
    

}

@@PostMapping("save")
public Result save(HttpServletRequest request){
    
    
	String name = request.getParameter("name");
    String password = request.getParameter("password");
}

二、前端解决

我们在封装axios的时候，改一下参数类型即可：

instance.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

三、其他

我出现问题是因为自己在封装axios的时候，对请求进行了拦截，将参数设置为了String类型，所以报错了，如下：

//1、发送数据之前（发送请求之前）
instance.interceptors.request.use(
    config =>{
    
      //成功则进入此方法
        //config:包含着网络请求的所有信息
        if(config.method === 'post'){
    
    
            config.data = querystring.stringify(config.data)
        }
        return config;
    },
    error => {
    
     //失败则进入此方法
        return Promise.reject(error);
    }
)

直接把以下两句注释掉的话，就不用像方法二一样改参数类型了：

if(config.method === 'post'){
    
    
            config.data = querystring.stringify(config.data)
        }

如果你实在是想用以上两句的话，那么更改一下参数类型就能正常访问了。