無數(shù)的人學習vue，都要面臨開發(fā)跨域的問題。

雖然百度出有解決辦法，依然有一半多的童鞋依樣畫葫蘆，還是沒搞定。

到底如何理解proxyTable，下面直入正題。

核心：proxyTable配置的代理是把服務器端（另一個域）代理到開發(fā)環(huán)境的域

核心：proxyTable配置的代理是把服務器端（另一個域）代理到開發(fā)環(huán)境的域

核心：proxyTable配置的代理是把服務器端（另一個域）代理到開發(fā)環(huán)境的域

重要的事情，說3遍。是把另一個域代理回本地。

說以，不要理解成我的所有服務器端接口沒有api目錄。配置里多了個/api路徑，不適合我

如果你配置完成，瀏覽器F12，查看網(wǎng)絡，發(fā)現(xiàn)ajax請求的URL是localhost:8080/api/……你可能會疑惑，我的api接口怎么變成vue開發(fā)的域了了？恭喜你代理已經(jīng)成功了，如果還沒OK，都是一些url的小問題了。

說明：

以下都參照我的環(huán)境來舉例，我前端開發(fā)是localhost:8080，請求的所有api是www.abc.com（我是添加了hosts的，如果你服務端是類似localhost:9527或其它，請自行修改）

1、/config/index.js，別看到路徑多了個api就覺得不適合，你就離開了，其實就是要這樣

proxyTable: {

? '/api': {

? ? target:'http://www.abc.com',?

? ? changeOrigin:true,

? ? pathRewrite: {

? ? ? '^/api':''

? ? }

? }

},

2、ajax請求的url，真實的服務端url是http://www.abc.com/login，前端請改寫成/api/login

this.$http.get('/api/login').then(……)

如果你配置OK，瀏覽器F12，查看ajax請求的網(wǎng)絡，會看到請求信息：

Request URL:? http://localhost:8080/api/login

恭喜你，大功告成了。服務端的http://www.abc.com/login被代理到開發(fā)環(huán)境下/api了，其實就是要這樣。

再次重申，核心：proxyTable配置的代理是把服務器端代理到開發(fā)環(huán)境的node站點

這樣的問題是開發(fā)環(huán)境和正式環(huán)境又如何兼容呢？我的做法是：

把所有異步請求的url都統(tǒng)一放到全局變量的，比如在一個api.js里面

const BaseUrl =? process.env.NODE_ENV=='production'? '':'/api';

//如果是正式環(huán)境，其實不需要域名，本身打包發(fā)布后就放到主域名下的，所以前綴可以為空字符串。

//如果你都想加上域名，可以自行根據(jù)開發(fā)的環(huán)境變量判斷取值，如process.env.NODE_ENV=='production'? process.env.BASE_API:'/api'

//我的這個evn.BASE_API的全局環(huán)境變量是在config/dev.env.js配置的，請自行對照配置

global.API_URL= {

'login':? ? ? ? ? ? ? BaseUrl +'/login',

……

使用的時候

this.$http.get(API_URL.login).then(……

其他補充：

1、如果你封裝了axios，那么開發(fā)模式千萬別再加baseURL參數(shù)了。

如果要加，也記得先判斷環(huán)境 process.env.NODE_ENV=='production'?

2、這個方法不需要api接口的后端配置 Access-Control-Allow-Origin: *

意味著，如果是分離開發(fā)，你不用麻煩后端童鞋。

總之這個proxyTable好處多多。