vue-cli項目開發/生產環境代理實現跨域請求+webpack配置開發/生產環境的接口地址

一、開發環境中跨域

　　使用 Vue-cli 創建的項目，開發地址是 localhost:8080，需要訪問非本機上的接口http://10.1.0.34:8000/queryRole。不同域名之間的訪問，需要跨域才能正確請求。跨域的方法很多，通常都需要后台配置，不過 Vue-cli 創建的項目，可以直接利用 Node.js 代理服務器，通過修改vue proxyTable接口實現跨域請求。在vue-cli項目中的config文件夾下的index.js配置文件中，修改前的dev：

dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, cssSourceMap: false }

　　只要修改里面的proxyTable: {}項

proxyTable: { '/api': {  //代理地址 
        target: 'http://10.1.0.34:8000/',  //需要代理的地址 
        changeOrigin: true,  //是否跨域 
        secure: false, pathRewrite: { '^/api': '/'   //本身的接口地址沒有 '/api' 這種通用前綴，所以要rewrite，如果本身有則去掉 
 } } }

　　然后重啟項目npm run dev

　　請求數據時URL前加上“/api”就可以跨域請求了

self.$axios.get('/api/queryRole', {params: params}) .then((res) => { console.log(res); }).catch((err) => { console.log(err); })

1、參數proxyTable詳解：

　　vue-cli的config文件里的參數：proxyTable，這個參數主要是一個地址映射表，你可以通過設置將復雜的url簡化，例如我們要請求的地址是api.xxxxxxxx.com/list/1，可以按照如下設置：

proxyTable: {
  '/list': { target: 'http://api.xxxxxxxx.com', pathRewrite: { '^/list': '/list' } } }

　　這樣我們在寫url的時候，只用寫成/list/1就可以代表api.xxxxxxxx.com/list/1.
　　那么又是如何解決跨域問題的呢？其實在上面的'list'的參數里有一個changeOrigin參數，接收一個布爾值，如果設置為true，那么本地會虛擬一個服務端接收你的請求並代你發送該請求，這樣就不會有跨域問題了，當然這只適用於開發環境。增加的代碼如下所示：

proxyTable: {
  '/list': { target: 'http://api.xxxxxxxx.com', changeOrigin: true, pathRewrite: { '^/list': '/list' } } }

　　vue-cli的這個設置來自於其使用的插件http-proxy-middleware

　　github：https://github.com/chimurai/http-proxy-middleware

　　深入了解的話可以看該插件配置說明，似乎還支持websocket，很強大的插件。

2、pathRewrite含義

　　用代理，首先你得有一個標識，告訴他你這個連接要用代理，不然的話，可能你的 html，css，js這些靜態資源都跑去代理。所以我們只要接口用代理，靜態文件用本地。'/iclient': {}, 就是告訴node，我接口只要是'/iclient'開頭的才用代理。所以你的接口就要這么寫 /iclient/xx/xx。最后代理的路徑就是 http://xxx.xx.com/iclient/xx/xx。可是不對啊，我正確的接口路徑里面沒有/iclient啊，所以就需要 pathRewrite，用'^/iclient':'', 把'/iclient'去掉，這樣既能有正確標識，又能在請求接口的時候去掉iclient。當然如果本身的接口中就有/iclient，那么就可以把pathRewrite這個參數去掉。

二、在生產環境中跨域

　　設置nginx配置文件：

location /api { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://fanyi.baidu.com/v2transapi;
}

三、設置不同的接口地址

　　平常我們團隊開發時都在公司的局域網內，調用接口也是局域網內部的，但是項目上線時，請求接口是線上服務器端的，那么就有接口之間的來回切換問題。

　　在使用vue-cli搭建項目以后，做相關配置就可以實現，不用手動更改接口路徑，也可以請求不同環境下的接口。

　　1、設置不同的接口地址

　　先找到以下文件

　　/config/dev.env.js

　　/config/prod.env.js

　　可以看到dev.env.js里面內容如下

　　這是生產環境的參數配置，然后我們可以再上面文件加入一行代碼，如下：這就是本地測試環境請求后台接口的域名

　　然后找到prod.env.js文件，如下：

　　我們加入一行代碼，如下：這是我們上傳服務器以后，請求后台接口的域名

　　2、在代碼中調用設置好的參數：

　　比如我在本項目中重新封裝axios(api文件在/src/api/index.js中)，將配置好的接口地址作為baseURL拼接到接口路徑中，應用參數部分如下：

 

　　最后重新啟動項目就可以了，當npm run dev的時候就運行在生產環境，當npm run build的時候就是正式的線上環境。