vue proxyTable代理 解決開發環境的跨域問題
阿新 • • 發佈:2018-09-25
-c xxx rec 意思 TTT span path 靜態資源 git
如果我們項目請求的地址為 htttp://xxxx.com/a/b/c
可以設置代理為:
dev:{
assetsSubDirectory: ‘static‘,// 靜態資源文件夾
assetsPublicPath: ‘/‘,// 發布路徑
proxyTable: { // 代理配置表,在這裏可以配置特定的請求代理到對應的API接口 // 例如將‘localhost:8080/api/xxx‘代理到‘www.example.com/api/xxx‘ // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
‘/a‘: {
target: htttp://xxxx.com/a‘,
// secure: false, // 如果是https接口,需要配置這個參數
changeOrigin: true,
// 如果接口跨域,需要進行這個參數配置
pathRewrite: {
‘^/a‘: ‘‘
}
}
}
}
例如:接口地址原本是 /save/index,但是為了匹配代理地址,在前面加一個 /api, 因此接口地址需要寫成這樣的即可生效 /api/save/index。
註意: ‘/api‘ 為匹配項,target 為被請求的地址,因為在 請求的 url 中加了前綴 ‘/api‘,而原本的接口是沒有這個前綴的,所以需要通過 pathRewrite 來重寫地址,將前綴 ‘/api‘ 轉為 ‘/‘。如果本身的接口地址就有 ‘/api‘ 這種通用前綴,就可以把 pathRewrite 刪掉。
項目中常見的:
項目中請求的地址應該為 axios.get(‘/a/b/c‘),代理解析時會在a前面加上" htttp://xxxx.com"變成了" htttp://xxxx.com/a/b/c",
當項目打包上線時,代碼裏的請求地址不需要改動,因為當線上代碼運行時,遇到 axios.get(‘/a/b/c‘) ,a前面有個‘/’代表根目錄的意思。
所以‘/a/b/c’會被解析為 postname+port+‘a/b/c‘,所以請求地址為 ‘htttp://xxxx.com/a/b/c
’。
vue proxyTable代理 解決開發環境的跨域問題