1. 程式人生 > >vue proxyTable代理 解決開發環境的跨域問題

vue proxyTable代理 解決開發環境的跨域問題

-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代理 解決開發環境的跨域問題