vue-cli4.x建立的專案中解決跨域問題

如果你的前端應用和後端 需要跨域，你需要在開發環境下將 API 請求代理到 API 伺服器。可以通過 *.config.js 中的 devServer.proxy 選項來配置。

 devServer: {
     open: false, // 編譯完成是否開啟網頁
     host:'0.0.0.0', // 指定使用地址，預設localhost,0.0.0.0代表可以被外界訪問
     port: 8080, // 訪問埠
     https: false, // 編譯失敗時重新整理頁面
     hot: true, // 開啟熱載入
     hotOnly: false,
     proxy: {
       [process.env.VUE_APP_API]: {//攔截器(攔截連結中有/api)
           target: process.env.VUE_API_DEV_TARGET,//'http://192.168.1.114:3000', //process.env.VUE_API_DEV_TARGET, //API伺服器的地址
           changeOrigin: true,
           pathRewrite: {
              //'^/api': '/' 
               [`^${process.env.VUE_APP_API}`]: '',
               //[`^${process.env.VUE_APP_API}`]: '/', //配置出來的介面沒有 /api
           }
        }
     }
  },

其中的process.env.Vue_app_API是開發環境檔案.env.development中的內容

VUE_APP_API = "/api"
VUE_API_DEV_TARGET = "http://192.168.1.114:3000/" //請求地址

axios建立

//建立例項
const service = axios.create({
    
    baseURL:process.env.VUE_APP_API,//需要在請求API中新增 /api
    timeout:5000,//超時
});

1、proxy會攔截所有url中可以成功匹配到 ‘/api’ 的請求。（proxy採用正則匹配，一旦url中包含你要的字串則停止向下匹配，詳查proxy匹配規則）

2、它會把攔截到的請求中的baseUrl替換為此處的target

如，http://192.168.1.114:3000/banner為請求內容的api,本地專案為http://192.168.1.114:3001/進行訪問，這就需要跨域，經過上述配置後。使用http://192.168.1.114:3001/api/baner請求時，通過devServer.proxy攔截器把http://192.168.1.114:3001/api進行替換成http://192.168.1.114:3000/後加/banner進行請求。

api呼叫

export function FindBanner(data={}){
    return service.request({
        method:"get",
        url:"/api/banner",
        params:data
    })
}