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

本文链接：https://blog.csdn.net/CSRAWD/article/details/114046073

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" "http://www.w3.org/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>
							2009/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@126.com
				</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-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";
			}

		}


	})
</script>