Vue向服务端发送axios请求报错解决:AxiosError {message: 'Request failed with status code 403', ...}
Vue向服务端发送axios请求报错解决:AxiosError
登录界面点击提交向服务端发送用户名和密码,在Vue中用axios向服务端发送请求,一直显示403错误:
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230423164214199-2006558905.png)
出现问题的前端请求代码如下:
axios({
method: "POST",
url: "http://127.0.0.1/user/account/token",
data: {
username: data.username,
password: data.password,
},
}).then(response => {
console.log(response);
});
springboot后端接收参数的代码如下:
@PostMapping("/account/token")
public Map<String, String> getToken(String username, String password) {
System.out.println("username: " + username);
System.out.println("password: " + password);
return userService.getToken(username, password);
}
后端意在接收前端的表单类型数据
查阅资料发现:axios会将我们请求和响应的数据自动转换成JSON格式 (原生ajax就没有,所以原生ajax在这里可以直接成功)
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230423164636336-1095913918.png)
springmvc中如果要接收json格式的数据需要添加 @RequestBody
注解,所以可以去修改后端,但这里毕竟还是要接收表单类型数据 x-www-form-urlencoded
,因此我们应该指定axios请求头的Content-Type
为x-www-form-urlencoded
修改的axios请求代码如下:
axios({
method: "POST",
url: "http://127.0.0.1/user/account/token",
data: {
username: data.username,
password: data.password,
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
}).then(response => {
console.log(response);
});
后端保持原有的接收参数的方式,
但是浏览器中的 Content-Type
还是json类型(不知道为啥),但是请求毕竟成功了~~
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230423165200487-928805368.png)
你只管出发,旅途自有风景~~