使用 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);
    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";
       }
   }
   

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");
               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 接口
     如果想要過濾 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>
     

6. 測試

   到這里，基本就沒有什么問題了。如果網絡中還有 OPTIONS 請求方法，請檢查下 qs 插件的配置和使用，如果是無法跨域請求或響應，java 代碼方面，請檢查 CrossFilter 過濾器的設置， Controller 或者其方法中是否加了 @CrossOrigin 注解，Vue 方面，axios 跨域設置是否配置無誤，比如說跨域的 Tomcat 服務器的地址和端口號是否一致。前面無誤，若是后台無法接收參數，最可能被忽略的就是參數名稱不一致的問題，然后是是否使用 sq 插件對 axios 中 json 數據進行轉換。

感謝大家觀看，如果感覺有用的，可以點個贊，謝謝！