如果想看排錯(cuò)思路的，可以看完踩坑經(jīng)歷，想直接要結(jié)果的捞附，可以直接看解決方案。

踩坑經(jīng)歷

最近我在使用 SSM + Vue 做自己的小項(xiàng)目您没。Dao層 和 Service層 之類的代碼已經(jīng)寫好了鸟召，就差 Controller層 和 Vue 的視圖層還沒有完成。今天在使用 axios 請求Controller 層時(shí)踩到了坑氨鹏。具體描述如下：我使用 axios 實(shí)現(xiàn)登錄功能欧募，在將前端輸入的登錄信息傳給 Controler 的時(shí)候，Controller 接收不到參數(shù)仆抵，但是卻響應(yīng)給了前端跟继，此時(shí)的我腦海冒出一堆的問號种冬。

91c6e8b849d4ec029c31ef3e699a95f

瀏覽器的網(wǎng)絡(luò)和后臺信息如下：

可以看出，我們的請求頭中已經(jīng)時(shí)是有發(fā)送數(shù)據(jù)的舔糖，但是我們后臺接收到的卻是null

19323bedc42f6007d2475d55b19e735

這里可以看到娱两，服務(wù)器響應(yīng)了我們剛剛發(fā)送的請求，并返回了響應(yīng)信息

5c98dab02a7d5fd725c068248d5cf8f

一開始金吗，我還是一頭霧水十兢，按照常理來說，請求頭有數(shù)據(jù)摇庙，服務(wù)器也返回了響應(yīng)旱物，這代表請求響應(yīng)的鏈路并沒有出錯(cuò)，后臺應(yīng)該是能接收到數(shù)據(jù)的呀卫袒。我當(dāng)時(shí)的第一反應(yīng)是：我的 axios 是不是使用錯(cuò)了宵呛？然后我去 axios 官網(wǎng)去查找，一無所獲玛臂。但當(dāng)我回去查開發(fā)者工具中網(wǎng)絡(luò)那里的時(shí)候烤蜕，發(fā)現(xiàn)到了一點(diǎn)端倪。

如果我們再仔細(xì)一點(diǎn)迹冤，會(huì)發(fā)現(xiàn)我們的網(wǎng)絡(luò)中其實(shí)是有兩個(gè)請求讽营，其中一個(gè)是我們正常的 POST方法 請求，另一個(gè)則是 OPTIONS 方法請求

image-20200624232854834

這時(shí)我就十分疑惑了泡徙，因?yàn)槲也]有見過這個(gè) OPTIONS 請求方法橱鹏。于是乎，我就百度去查這個(gè) OPTIONS 請求方法究竟是什么堪藐。

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

當(dāng)瀏覽器在處理復(fù)雜跨域請求時(shí)，會(huì)在真正發(fā)送請求之前礁竞，會(huì)先進(jìn)行一次預(yù)請求糖荒，請求方法就是剛剛我們看到的 OPTIONS 請求方法。如果在 OPTIONS 請求之后服務(wù)器返回了正確的http響應(yīng)模捂，則會(huì)進(jìn)行第二次的真正的訪問捶朵，若是接收到的是 500，404等錯(cuò)誤http狀態(tài)狂男，則會(huì)停止第二次真正的http響應(yīng)综看。

看到這里，是不是突然恍然大悟岖食，原來就是這個(gè) OPTIONS 在作怪红碑！我們的服務(wù)器并不是沒有接收到參數(shù)，而是由于第一次的預(yù)請求泡垃，觸發(fā)了 Controller 里的方法析珊，第二次真正的請求就不會(huì)觸發(fā)了 Controller 里的方法羡鸥，而是直接獲得這個(gè)方法的返回值

終于找到了我們后臺接收不到數(shù)據(jù)的原因的，那么我們應(yīng)該怎么去解決這個(gè) OPTIONS 呢唾琼？

我順著這個(gè)思路兄春，繼續(xù)去查了百度（狗頭）澎剥，然后找到了解決方法锡溯，博客地址：https://blog.csdn.net/Revival_Liang/article/details/79016895

總結(jié)他博客的內(nèi)容，就是把格式為 JSON 的參數(shù)用 qs 插件轉(zhuǎn)換哑姚。

在 main.js 中加入如下設(shè)置

/* 解決 axios options請求后臺無法接收參數(shù)的問題 */
Vue.prototype.$qs = qs;

我使用了上面的方法祭饭，也還是遇到一些坑的，下面我就來總結(jié)一下使用 axios 后臺無法接收到數(shù)據(jù)的解決方案

解決方案

1. 在開發(fā)者工具中查看控制臺是否有報(bào)錯(cuò)叙量，網(wǎng)絡(luò)中的請求是否有問題倡蝙，若情況和我的差不多，則如下方法適用绞佩，否則很大概率是代碼問題寺鸥。這個(gè)解決方法的前提是請求響應(yīng)鏈路是沒有問題的。

2. 配置好跨域設(shè)置

   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);
   
   // 設(shè)置基礎(chǔ)URL為后端服務(wù)api地址品山，注：這里冒號里的胆建，是后臺 Tomcat 服務(wù)器啟動(dòng)的端口地址
   axios.defaults.baseURL = "http://127.0.0.1:8088";
   //設(shè)置全局，每次ajax請求攜帶cookies
   // axios.defaults.withCredentials = true
   // 將API方法綁定到全局
   Vue.prototype.$axios = axios;
   

   后臺

   配置 Tomcat肘交，端口號和地址必須和 Vue 中設(shè)置的跨域端口號和地址一致笆载，具體Tomcat配置步驟自行百度

   在 Controller 類上方添加 @CrossOrigin 注解

   @Controller
   @ResponseBody
   @CrossOrigin // controller 需要添加這個(gè)注解才能實(shí)現(xiàn)跨域請求或響應(yīng)
   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 中加入如下設(shè)置

   /* 解決 axios options請求后臺無法接收參數(shù)的問題 */
   Vue.prototype.$qs = qs;
   

4. 把格式為 JSON 的參數(shù)用 qs 插件轉(zhuǎn)換

   找到解決辦法后涯呻，我又在這里拆坑了凉驻，這步應(yīng)該就是 解決使用 axios 后臺無法接收到數(shù)據(jù)問題的核心，因?yàn)橹挥邪催@步來做复罐，才能解決向服務(wù)器發(fā)送 OPTIONS 方法請求的問題涝登。

   登錄的完整代碼如下，核心解決這個(gè)問題的代碼是 axios 進(jìn)行異步請求的那一段

   <script>
     export default {
       name: "Login",
       data() {
         return {
           form: {
             username: '',
             password: ''
           },
    
           // 表單驗(yàn)證效诅，需要在 el-form-item 元素中增加 prop 屬性
           rules: {
             username: [
               {required: true, message: '賬號不可為空', trigger: 'blur'}
             ],
             password: [
               {required: true, message: '密碼不可為空', trigger: 'blur'}
             ]
           },
    
           // 對話框顯示和隱藏
           dialogVisible: false
         }
       },
       methods: {
         onSubmit(formName) {
           // 為表單綁定驗(yàn)證功能
           this.$refs[formName].validate((valid) => {
             if (valid) {
    
               // 使用 vue-router 路由到指定頁面胀滚，該方式稱之為編程式導(dǎo)航
               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. 設(shè)置過濾器

   這個(gè)也是核心的一步，但一般都不會(huì)忘記或者復(fù)制粘貼就行了

   • 創(chuàng)建過濾器 CrossFilter填帽，并實(shí)現(xiàn) Filter 接口
     如果想要過濾 OPTIONS 請求方法蛛淋，則修改下面 Access-Control-Allow-Methods 中的參數(shù)即可

     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");
     
             // 設(shè)置請求頭
             response.setContentType("textml;charset=UTF-8");
             response.setHeader("Access-Control-Allow-Origin", myOrigin);
             // 這里可以設(shè)置拒絕 OPTIONS 的請求，如果需要也可以自行設(shè)置
             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. 測試

   到這里篡腌，基本就沒有什么問題了褐荷。如果網(wǎng)絡(luò)中還有 OPTIONS 請求方法，請檢查下 qs 插件的配置和使用嘹悼，如果是無法跨域請求或響應(yīng)叛甫，java 代碼方面层宫，請檢查 CrossFilter 過濾器的設(shè)置， Controller 或者其方法中是否加了 @CrossOrigin 注解其监，Vue 方面萌腿，axios 跨域設(shè)置是否配置無誤，比如說跨域的 Tomcat 服務(wù)器的地址和端口號是否一致抖苦。前面無誤毁菱，若是后臺無法接收參數(shù)，最可能被忽略的就是參數(shù)名稱不一致的問題锌历，然后是是否使用 sq 插件對 axios 中 json 數(shù)據(jù)進(jìn)行轉(zhuǎn)換贮庞。

感謝大家觀看，如果感覺有用的究西，可以點(diǎn)個(gè)贊窗慎，謝謝！