在前後端分離vue作為前端框架，在使用伺服器介面時面臨的第一個問題就是跨域。本文涉及內容僅保證在vue-cli3.0腳手架建立的專案中、及本地除錯中有效（使用之前版本腳手架建立的專案請自行轉換），本文內容不適用於伺服器端前後臺打包部署。

一、處理跨域介面呼叫

1、在專案根目錄下建立vue .config.js檔案

2、在vue.config.js中配置本地代理進行轉發

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://xxx.xxx', //
 
伺服器的地址
                secure: true,//如果是https請設定為true
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
    }
}
//此時便可將本地Ajax對/api路徑的請求通過本地代理轉發到 https://xxx.xxx

3、axios配置

import axios from 'axios'

//axios.defaults.baseURL = 'https://xxx.com' 全域性方式生成環境使用的地址
 

//const baseURL = 'https://xxx.com' 物件方式生成環境使用的地址
const baseURL = '/api' //本地除錯用地址，正式釋出時要更換為正式地址
const request = axios.create({
  baseURL: baseURL,
  timeout: 5000
});

axios請求

import request from 'request所長js'

export function getEnterpriseList(query) {
    return request({
        url: '/webapi/datacenter/core/enterprise/list',
        method: 
 
'get',
        params: query
    })
}

4、此時就可以在愉快的玩耍了！

二、處理cookie及身份認證

在使用cookie進行身份識別的體統中，雖然可以跨域呼叫到遠端介面了，但是身份認證後才能正常工作的介面此時呼叫會有型別下面的情況：

真是喜大苦奔/(ㄒoㄒ)/~~

為啥會這樣呢：本地除錯vue用的localhost，遠端介面用的是xxx.com（或192.168.xxx.xxx）。那麼仔細觀察除錯工具的網路請求，你會發現cookie的domain有些不同。

就是因為domain域名不同，所以從A網站來得cookie是不可能被髮送大B網站的。我們本地除錯用的是localhost，介面自然接受不到身份資訊相關的cookie啦，因此呼叫介面不順暢。

要解決這個問題需要2步：

1、對介面網站的cookie也進行代理，配置如下：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://xxx.com',
                secure: true,
                changeOrigin: true, 
                pathRewrite: { 
                    '^/api': ''
                },
                cookieDomainRewrite: {
                  'xxx.com': 'localhost'
                }
            }
        },
    }
}

2、axios啟用cookie、session的配置，這樣axios就會在執行Ajax資訊的時候攜帶cookie了：

//axios.defaults.withCredentials = true
const request = axios.create({
  baseURL: baseURL,
  timeout: 5000,
  withCredentials: true//攜帶身份認證檔案（cookie）
});

3、重新進行vue本地除錯，世界變得絲滑了，可以自由玩耍了！