axios访问后台404_使用 axios 后台无法接收到数据的解决方案

本文主要介绍了在SSM+Vue项目中,使用axios发送请求时遇到的404问题。通过分析浏览器的OPTIONS预请求,发现是跨域问题导致。解决方案包括在Vue中配置axios的全局设置,后台配置Tomcat和添加@CrossOrigin注解,以及创建过滤器处理OPTIONS请求,确保参数正确传递。
摘要由CSDN通过智能技术生成

如果想看排错思路的,可以看完踩坑经历,想直接要结果的,可以直接看解决方案。

踩坑经历

最近我在使用 SSM + Vue 做自己的小项目。Dao层 和 Service层 之类的代码已经写好了,就差 Controller层 和 Vue 的视图层还没有完成。今天在使用 axios 请求Controller 层时踩到了坑。具体描述如下:我使用 axios 实现登录功能,在将前端输入的登录信息传给 Controler 的时候,Controller 接收不到参数,但是却响应给了前端,此时的我脑海冒出一堆的问号。

f3339e6141479cce405893f7858f7f02.png

浏览器的网络和后台信息如下:

可以看出,我们的请求头中已经时是有发送数据的,但是我们后台接收到的却是null

f20c9acaa2c93e8e83a2fef302bd3232.png

这里可以看到,服务器响应了我们刚刚发送的请求,并返回了响应信息

23729a9811e70955773f8b81e382fc82.png

一开始,我还是一头雾水,按照常理来说,请求头有数据,服务器也返回了响应,这代表请求响应的链路并没有出错,后台应该是能接收到数据的呀。我当时的第一反应是:我的 axios 是不是使用错了?然后我去 axios 官网去查找,一无所获。但当我回去查开发者工具中网络那里的时候,发现到了一点端倪。

如果我们再仔细一点,会发现我们的网络中其实是有两个请求,其中一个是我们正常的 POST方法 请求,另一个则是 OPTIONS 方法请求

a5c5ee0a69d0ebc169d3c6fbc2280f96.png

这时我就十分疑惑了,因为我并没有见过这个 OPTIONS 请求方法。于是乎,我就百度去查这个 OPTIONS 请求方法究竟是什么。

当浏览器在处理复杂跨域请求时,会在真正发送请求之前,会

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值