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

踩坑经历

最近我在使用 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 里的方法，而是直接获得这个方法的返回值

终于找到了我们后台接收不到数据的原因的，那么我们应该怎么去解决这个 OPTIONS 呢？

总结他博客的内容，就是把格式为 JSON 的参数用 qs 插件转换。

在 main.js 中加入如下设置

/* 解决 axios options请求后台无法接收参数的问题 */

Vue.prototype.$qs = qs;

我使用了上面的方法，也还是遇到一些坑的，下面我就来总结一下使用 axios 后台无法接收到数据的解决方案

解决方案

在开发者工具中查看控制台是否有报错，网络中的请求是否有问题，若情况和我的差不多，则如下方法适用，否则很大概率是代码问题。这个解决方法的前提是请求响应链路是没有问题的。

配置好跨域设置

Vue中

在 main.js 中加入如下配置

// 引用axios和qs插件

import axios from 'axios'

import VueAxios from 'vue-axios'

import qs from "qs";

Vue.use(VueAxios, axios);

Vue.use(qs);

// 设置基础URL为后端服务api地址，注：这里冒号里的，是后台 Tomcat 服务器启动的端口地址

axios.defaults.baseURL = "http://127.0.0.1:8088";

//设置全局，每次ajax请求携带cookies

// axios.defaults.withCredentials = true

// 将API方法绑定到全局

Vue.prototype.$axios = axios;

后台

配置 Tomcat，端口号和地址必须和 Vue 中设置的跨域端口号和地址一致，具体Tomcat配置步骤自行百度

在 Controller 类上方添加 @CrossOrigin 注解

@Controller

@ResponseBody

@CrossOrigin// controller 需要添加这个注解才能实现跨域请求或响应

public class UserController {

// 具体的代码

@Autowired

private UserService userService;

@RequestMapping("/login")

public String login(String userName,String password){

System.out.println(userName);

System.out.println(password);

return "test";

}

}

将 qs 插件绑定到全局(由于 axios 自带 qs 插件，所以无须npm安装)

在 main.js 中加入如下设置

/* 解决 axios options请求后台无法接收参数的问题 */

Vue.prototype.$qs = qs;

把格式为 JSON 的参数用 qs 插件转换

找到解决办法后，我又在这里拆坑了，这步应该就是 解决使用 axios 后台无法接收到数据问题的核心，因为只有按这步来做，才能解决向服务器发送 OPTIONS 方法请求的问题。

登录的完整代码如下，核心解决这个问题的代码是 axios 进行异步请求的那一段

export default {

name: "Login",

data() {

return {

form: {

username: '',

password: ''

},

// 表单验证，需要在 el-form-item 元素中增加 prop 属性

rules: {

username: [

{required: true, message: '账号不可为空', trigger: 'blur'}

],

password: [

{required: true, message: '密码不可为空', trigger: 'blur'}

]

},

// 对话框显示和隐藏

dialogVisible: false

}

},

methods: {

onSubmit(formName) {

// 为表单绑定验证功能

this.$refs[formName].validate((valid) => {

if (valid) {

// 使用 vue-router 路由到指定页面，该方式称之为编程式导航

this.$router.push("/book/showAllBook");

this.axios.post('/user/login', this.$qs.stringify({

userName: 123, password: 456

})).then(function (response) {

console.log(response.data);

})

} else {

this.dialogVisible = true;

return false;

}

});

}

}

}

设置过滤器

这个也是核心的一步，但一般都不会忘记或者复制粘贴就行了

创建过滤器 CrossFilter，并实现 Filter 接口

如果想要过滤 OPTIONS 请求方法，则修改下面 Access-Control-Allow-Methods 中的参数即可

package com.xp.filter;

import javax.servlet.*;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

/**

* axios跨域过滤器

*

* create by 2020-06-24 14:23

*

* @author xp

*/

public class CrossFilter implements Filter {

@Override

public void init(FilterConfig filterConfig) throws ServletException {

}

@Override

public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {

HttpServletResponse response = (HttpServletResponse) servletResponse;

HttpServletRequest request = (HttpServletRequest) servletRequest;

String myOrigin = request.getHeader("origin");

// 设置请求头

response.setContentType("textml;charset=UTF-8");

response.setHeader("Access-Control-Allow-Origin", myOrigin);

// 这里可以设置拒绝 OPTIONS 的请求，如果需要也可以自行设置

response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");

response.setHeader("Access-Control-Max-Age", "3600");

response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");

response.setHeader("Access-Control-Allow-Credentials", "true");

response.setHeader("P3P", "CP=\"NON DSP COR CURa ADMa DEVa TAIa PSAa PSDa IVAa IVDa CONa HISa TELa OTPa OUR UNRa IND UNI COM NAV INT DEM CNT PRE LOC\"");

response.setHeader("XDomainRequestAllowed", "1");

chain.doFilter(request, response);

}

@Override

public void destroy() {

}

}

在 web.xml 中配置过滤器

crossFilter

com.xp.filter.CrossFilter

crossFilter

/*

测试

到这里，基本就没有什么问题了。如果网络中还有 OPTIONS 请求方法，请检查下 qs 插件的配置和使用，如果是无法跨域请求或响应，java 代码方面，请检查 CrossFilter 过滤器的设置， Controller 或者其方法中是否加了 @CrossOrigin 注解，Vue 方面，axios 跨域设置是否配置无误，比如说跨域的 Tomcat 服务器的地址和端口号是否一致。前面无误，若是后台无法接收参数，最可能被忽略的就是参数名称不一致的问题，然后是是否使用 sq 插件对 axios 中 json 数据进行转换。

感谢大家观看，如果感觉有用的，可以点个赞，谢谢！