一. 基本環境

• 前端
  
  • vue：2.5.6
  • axios：0.18
• 後臺
  
  • ssm框架
• 前後端資料採用json格式傳輸

二. 前端配置

• axios配置

  • 安裝
    

    npm install axios --save

  

  • 在所需元件中引入axios

    import axios from 'axios';

  • 在<script>中配置axios引數

    const myaxios = axios// 不跨域的axios
    // 如果要跨域的話, 對axios進行一些設定,當前使用的是跨域的
    const axiosInstance = axios.create({
        headers: {'Content-Type'
     
    : 'application/json;charset=utf-8'},// 設定傳輸內容的型別和編碼
        withCredentials: true,// 指定某個請求應該傳送憑據
    });

    如圖：
    

• 配置代理
  開啟config/index.js檔案，找到dev物件裡面的proxyTable修改為如下內容：

proxyTable: {
  '/api': {
    target:'http://127.0.0.1:80',
    changeOrigin:true,
    pathRewrite:{
      '^/api': ''
    }
  }
},

target 的引數就是你要訪問的伺服器地址, 你在程式碼裡面寫/api就等於寫了這個地址 , 比如我要訪問

• 使用axios傳送請求

// 跨域訪問
axiosInstance.post('/api/vue-ssm/login', 請求的引數,)
.then( response => {
  console.log(response.data);// response.data為後端返回的具體資料
  alert("請求成功");
})
.catch( error => {
  alert("請求失敗");
});

如圖：

axios詳細引數配置可以參考：Axios 中文說明

三. 後端配置

• 使用SpringMvc的HandlerInterceptorAdapter攔截器

public class RquestInterceptor extends HandlerInterceptorAdapter {

    /**
     * 預處理回撥方法，實現處理器的預處理（如檢查登陸），第三個引數為響應的處理器，自定義Controller
     * 返回值：true表示繼續流程（如呼叫下一個攔截器或處理器）；false表示流程中斷（如登入檢查失敗），
     * 不會繼續呼叫其他的攔截器或處理器，此時我們需要通過response來產生響應；
     */
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
            throws Exception {
        System.out.println("beforeAction");

        // 當Access-Control-Allow-Credentials設為true的時候，Access-Control-Allow-Origin不能設為星號
        response.setHeader("Access-Control-Allow-Credentials", "true");
        // 可以指定特定的ip:port
        //response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:9006, http://127.0.0.1:8080");
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));// *
        response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, accept, content-type, xxxx");// * ;
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,PUT,OPTIONS,DELETE,HEAD");
        response.setHeader("Content-Type", "application/json");
        String method= request.getMethod();
        System.out.println(method);
        return true;

    }

    /**
     * 後處理回撥方法，實現處理器的後處理（但在渲染檢視之前），此時我們可以通過modelAndView（模型和檢視物件）
     * 對模型資料進行處理或對檢視進行處理，modelAndView也可能為null。
     */
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
            ModelAndView modelAndView) throws Exception {
        super.postHandle(request, response, handler, modelAndView);
    }

    /**
     * 整個請求處理完畢回撥方法，即在檢視渲染完畢時回撥，如效能監控中我們可以在此記錄結束時間並輸出消耗時間，
     * 還可以進行一些資源清理，類似於try-catch-finally中的finally，但僅呼叫處理器執行鏈中
     */
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
            throws Exception {
        super.afterCompletion(request, response, handler, ex);
    }

    /**
     * 處理非同步請求
     * 不是HandlerInterceptor的介面實現，是AsyncHandlerInterceptor的
     * AsyncHandlerInterceptor實現了HandlerInterceptor
     */
    public void afterConcurrentHandlingStarted(HttpServletRequest request, HttpServletResponse response, Object handler)
            throws Exception {
        super.afterConcurrentHandlingStarted(request, response, handler);
    }
}

• 配置到SpringMvc配置檔案

<mvc:interceptors>
    <!-- 注意攔截器的執行順序，會按照這裡配置順序執行 -->
    <mvc:interceptor>
        <mvc:mapping path="/**" /><!--匹配所有路徑-->
        <bean class="com.ysl.interceptor.RquestInterceptor" />
    </mvc:interceptor>
    <!-- 其他攔截器 -->
   <mvc:interceptor></mvc:interceptor>
</mvc:interceptors>

好了，這就是我使用axios實現跨域訪問的全過程，希望對大家有所幫助。