100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Vue通过Axios向后台发送Post请求 浏览器Console提示405 后台显示Get请求不支持--解决办法

Vue通过Axios向后台发送Post请求 浏览器Console提示405 后台显示Get请求不支持--解决办法

时间:2019-06-05 12:32:25

相关推荐

Vue通过Axios向后台发送Post请求 浏览器Console提示405 后台显示Get请求不支持--解决办法

Vue通过Axios向后台发送Post请求,浏览器Console提示405,后台显示Get请求不支持–解决办法

问题场景:

axios默认是发送get请求,我要给后台发送一组用户填写的表单数据,逻辑简单,代码不多,然后一运行直接报题目上描述的错

楞了半天,硬是看不出问题在哪???

后面发现问题了,只能说写代码还是要细心一点

问题原因:

前端配置Vue的saveEmp方法时,通过axios的构造,对axios进行一些配置,这里配置错了

图里画圈那个配置,我写成了"methods",比正确的多了个"s",然后就白给了,axios没有配置成功,导致仍然发出的是Get请求,而后台该url下的请求是post,所以就出现了题目上的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title>add Emp</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css"href="css/style.css" /></head><body><div id="wrap"><div id="top_content"><div id="header"><div id="rightheader"><p>/11/20<br/><a href="javascript:;" @click="logout">安全退出</a>></p></div><div id="topheader"><h1 id="title"><a href="/ems_vue/emplist.html">main</a></h1></div><div id="navigation"></div></div><div id="content"><p id="whereami"></p><h1>add Emp info:</h1><form action="emplist.html" method="post"><table cellpadding="0" cellspacing="0" border="0"class="form_table"><tr><td valign="middle" align="right">name:</td><td valign="middle" align="left"><input type="text" class="inputgri" v-model="emp.name" name="name" /></td></tr><tr><td valign="middle" align="right">photo:</td><td valign="middle" align="left"><!--Vue中的文件操作:绑定ref--><input type="file" ref="myPhoto" name="photo" /></td></tr><tr><td valign="middle" align="right">salary:</td><td valign="middle" align="left"><input type="text" class="inputgri" v-model="emp.salary" name="salary" /></td></tr><tr><td valign="middle" align="right">age:</td><td valign="middle" align="left"><input type="text" class="inputgri" v-model="emp.age" name="age" /></td></tr></table><p><input type="button" @click="saveEmp" class="button" value="Confirm" /></p></form></div></div><div id="footer"><div id="footer_bg">ABC@</div></div></div></body></html><!--vue导入--><script src="/ems_vue/js/vue.js"></script><!--异步请求导入--><script src="/ems_vue/js/axios.min.js"></script><script><!--vue实例-->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-datavar 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";}}})</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。