问题:请求的数据格式与后台要求的不匹配
思路:axios对比用jq的请求是成功的
axios请求:
jq请求:
首先发现Request Payload和Form Data不同
解决:增加请求头
this.$http({
method: "post",
url: "/login/xxx",
data: this.ruleForm,
headers: { "content-type": "application/x-www-form-urlencoded" },
}).then((res) => {
console.log(res);
});
结果:
很多人到这就解决了,但是我的继续400,对比了一下jq的,应该不难用{}包裹,那就是必须要Form Data格式的数据了
使用formData包裹数据
let formData = new FormData();
formData.append('name',this.ruleForm.name);
formData.append('password',this.ruleForm.password);
this.$http({
method: "post",
url: "/login/checkLogin",
data: formData,
headers: { "content-type": "application/x-www-form-urlencoded" },
}).then((res) => {
console.log(res);
});
最后成功
优化:
如果不想每次请求都手动改headers
那么就全局配置axios的headers
import axios from 'axios'
axios.headers = {
'content-type': 'application/x-www-form-urlencoded'
}
Vue.prototype.$http = axios
``