|
Vue通过Axios向后台发送Post请求，浏览器Console提示405，后台显示Get请求不支持–解决办法
问题场景： axios默认是发送get请求，我要给后台发送一组用户填写的表单数据，逻辑简单，代码不多，然后一运行直接报题目上描述的错
楞了半天，硬是看不出问题在哪？？？
后面发现问题了，只能说写代码还是要细心一点
问题原因： 前端配置Vue的saveEmp方法时，通过axios的构造，对axios进行一些配置，这里配置错了  图里画圈那个配置，我写成了"methods"，比正确的多了个"s"，然后就白给了，axios没有配置成功，导致仍然发出的是Get请求，而后台该url下的请求是post，所以就出现了题目上的问题
add Emp
2009/11/20
安全退出>
main
add Emp info:
name:
photo:
salary:
age:
[email protected]
var app = new Vue({
//挂载作用域
//从register.html中可得知，整个都是由wrap包裹起来
//所以作用域传wrap进来即可
el: "#wrap",
//作用域中获取的数据
data: { //数据
user: {}, //用来存放用户登录信息
emp:{}, //员工信息
},
methods: { //自定义函数
//安全退出
logout(){
localStorage.removeItem("user");
location.reload(true);//刷新页面
},
//保存员工信息
saveEmp(){
console.log(this.emp);
// 拿到图片信息（获取文件信息）
// 日后如果有很多个都绑定了myPhoto，则像数组一样，用遍历的方法来取得
console.log(this.$refs.myPhoto.files[0]);
//文件上传时，请求方式必须是post enctype必须是multipart/form-data
var formData = new FormData();
formData.append("name",this.emp.name);
formData.append("salary",this.emp.salary);
formData.append("age",this.emp.age);
formData.append("photo",this.$refs.myPhoto.files[0]);
var _this = this;
axios({ //通过axios的构造，对axios进行一些配置
method: "post",
url:"http://localhost:8989/ems_vue/emp/save", //向后台提交的路径
data:formData,//表单的信息
headers:{ //指定发起请求的请求头
'content-type':'mutipart/form-data'
}
}).then(res=>{ //底层实际上也是走的表单提交的方式
console.log(res.data);
});
},
},
created() { //生命周期函数，页面渲染前调用
//取出在登录后，后台返回的用户信息
//该信息，以JSON的格式存在localStorage的Item中
var userString = localStorage.getItem("user");
if (userString) {
//按JSON的形式解析数据，并存进user对象中
this.user = JSON.parse(userString);
//console.log(user);
} else {
alert("您尚未登录，点击确定跳转至登录！")
location.href="http://localhost:8989/ems_vue/login.html";
}
}
})
|