Vue-cli proxyTable解決開發環境的跨域問題

和后端聯調時總是會面對惱人的跨域問題，
如果是使用vue-cli生成的開發環境，直接在config/index.js中，把proxytable里面配置成差不多這樣,后面的api就都會走target

changeOrigin參數，接收一個布爾值，如果設置為true,那么本地會虛擬一個服務端接收你的請求並代你發送該請求，這樣就不會有跨域問題了，當然這只適用於開發環境。

反向代理

proxyTable: { '/api': {//這里是我配置的名字

　　　　target: 'http://xxx', //這個路徑是我代理到本地tp框架里面

　　　　 changeOrigin: true, //開啟代理

 　　　　pathRewrite: { '^/api': '/api' } //這里重寫路徑/run就代理到對應地址

　　} 
}

當然，此時的api接口形式應該為/api/xxx,

補充回答：config中配置：

proxyTable: { '/api': { target: 'http://picup.xxxx.net', changeOrigin: true, pathRewrite: { '^/api': '' } } }

請求:

 

get('/api/1/picture?method=upload')

 

https://vuejs-templates.github.io/webpack/proxy.html

 

vue-cli的這個設置來自於其使用的插件http-proxy-middleware
github：https://github.com/chimurai/http-proxy-middleware
深入了解的話可以看該插件配置說明，似乎還支持websocket，很強大的插件。