vue用axios发送json数据 400 Bad Request的解决

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Wu_Kunbo/article/details/102777838

问题描述

刚开始学SpringBoot + vue.js前后端分离开发的模式。

写了个demo，前端以JSON格式将参数数据传到后端，后端用==@RequestBody==注解接收。vue代码如下

postJsonRequest = (config) => {
    return axios({
      method:'post',
      url:config.url,
      headers:{'Content-Type':'application/json;charset=UTF-8'},
      params:JSON.stringify(config.params)
    });
  }

F12中看到请求的== Content-Type==没有设置成功，所以传到后端的不是JSON数据导致报错。

解决方案

在网上收集资料后发现。原来是因为data为空，content-length为0，此时content-type不生效（可能是考虑到优化的问题）。

因此，把axios方法中的params改成data就可以了，修改完代码如下：

postJsonRequest = (config) => {
    return axios({
      method:'post',
      url:config.url,
      headers:{'Content-Type':'application/json;charset=UTF-8'},
      data:JSON.stringify(config.params)
    });
  }

重新访问，成功调用接口。

可以看到，请求参数为json格式，并且请求消息头里Content-Type也设置生效了。