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

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

踩坑经历

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

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

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

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

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

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

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

当浏览器在处理复杂跨域请求时，会在真正发送请求之前，会先进行一次预请求，请求方法就是刚刚我们看到的 OPTIONS 请求方法。如果在 OPTIONS 请求之后服务器返回了正确的http响应，则会进行第二次的真正的访问，若是接收到的是 500，404等错误http状态，则会停止第二次真正的http响应。

看到这里，是不是突然恍然大悟，原来就是这个 OPTIONS 在作怪！我们的服务器并不是没有接收到参数，而是由于第一次的预请求，触发了 Controller 里的方法，第二次真正的请求就不会触发了 Controller 里的方法，而是直接获得这个方法的返回值