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

Posted Windows_XP

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 axios 后台无法接收到数据的解决方案相关的知识,希望对你有一定的参考价值。

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

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

踩坑经历

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

技术图片

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

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

技术图片

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

技术图片

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

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

技术图片

这时我就十分疑惑了,因为我并没有见过这个 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 后台无法接收到数据的解决方案

解决方案

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

  2. 配置好跨域设置

    Vue中

    在 main.js 中加入如下配置

    // 引用axios和qs插件
    import axios from ‘axios‘
    import VueAxios from ‘vue-axios‘
    import qs from "qs";
    
    Vue.use(VueAxios, axios);
    // 设置基础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";
        }
    }
    
  3. 将 qs 插件绑定到全局(由于 axios 自带 qs 插件,所以无须npm安装)

    在 main.js 中加入如下设置

    /* 解决 axios options请求后台无法接收参数的问题 */
    Vue.prototype.$qs = qs;
    
  4. 把格式为 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");
                  
                // 使用axios提交登录信息(this.$sq.stringify将json格式的数据用sq插件转换) 
                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>
    
  5. 设置过滤器

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

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

      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);
              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>
      
  6. 测试

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

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

以上是关于使用 axios 后台无法接收到数据的解决方案的主要内容,如果未能解决你的问题,请参考以下文章

vue 使用 axios 发 post 请求,后台无法接收到数据

axios的post请求后台(ThinkPHP5)接收不到数据

解决Vue axios post请求,后台获取不到数据的问题方法

axios post请求后台接收不到参数 和 一些配置问题

axios post后台接收不到参数

axios的post请求后台(ThinkPHP5)接收不到数据