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，很強大的插件。