無數(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好處多多梦皮。
