Vue cli 2 和 Vue cli 3 配置代理實現跨域

一、Vue Cli 2

proxyTable

// 配置好後一定要關閉原來的server，重新npm run dev啓動項目。不然無效。
proxyTable: {
      // 用‘/api’開頭，代理所有請求到目標服務器
      '/api': {
        target: 'http:xxx.com', // 目標接口域名
        changeOrigin: true, // 是否啓用跨域
        pathRewrite: { //
          '^/api': ''
        }
      }

vue的轉發機制（proxyTable），proxyTable代理功能可以實現轉發機制（通過修改config裏面修改index.js文件）。 

注意： ‘/api’ 爲匹配項，target 爲被請求的地址，因爲在 ajax 的 url 中加了前綴 ‘/api’，而原本的接口是沒有這個前綴的，所以需要通過 pathRewrite 來重寫地址，將前綴 ‘/api’ 轉爲 ‘/’。如果本身的接口地址就有 ‘/api’ 這種通用前綴，就可以把 pathRewrite 刪掉。

二、Vue Cli 3

devServer.proxy

直接在config.js裏修改

# string
module.exports = {
devServer:{
    host: 'localhost',//target host
    port: 8080,
    //proxy:{'/api':{}},代理器中設置/api,項目中請求路徑爲/api的替換爲target
    proxy:{
        '/api':{
            target: 'http://192.168.1.30:8085',//代理地址也就是服務器地址，這裏設置的地址會代替axios中設置的baseURL
            changeOrigin: true,// 如果接口跨域，需要進行這個參數配置
            secure:false, // 使用的是http協議則設置爲false，https協議則設置爲true
            //ws: true, // proxy websockets
            //pathRewrite方法重寫url
            pathRewrite: {
                '^/api': '/' 
                //pathRewrite: {'^/api': '/'} 重寫之後url爲 http://192.168.1.30:8085/xxxx
                //pathRewrite: {'^/api': '/api'} 重寫之後url爲 http://192.168.1.30:8085/api/xxxx
                // 設置之後雖然瀏覽器看到的請求還是 localhost/xxxx，但是實際上已經轉到http://192.168.1.30:8085/xxxx上了
                // 如果只是修改域名，則不需要寫pathRewrite
           }
    }}
},
}

注意：配置proxy之後， axios 的 baseURL 也要做相應的修改。

統一代理，賦值爲字符串（/api）,與proxy裏配置的要對應。

axios.defaults.baseURL = '/api'