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

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

踩坑经历

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

91c6e8b849d4ec029c31ef3e699a95f

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

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

19323bedc42f6007d2475d55b19e735

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

5c98dab02a7d5fd725c068248d5cf8f

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

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

image-20200624232854834

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

然后在一篇博客中查询到了很多信息，博客地址：https://blog.csdn.net/kahhy/article/details/81563063

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

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

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

我顺着这个思路，继续去查了百度（狗头），然后找到了解决方法，博客地址：https://blog.csdn.net/Revival_Liang/article/details/79016895

总结他博客的内容，就是把格式为 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 进行异步请求的那一段

<script>
  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;
          }
        });
      }
    }
  }
</script>

设置过滤器

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

创建过滤器 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跨域过滤器
 * <p>
 * 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 中配置过滤器

<!-- 解决axios跨域问题 -->
<filter>
    <filter-name>crossFilter</filter-name>
    <filter-class>com.xp.filter.CrossFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>crossFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

测试

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

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