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


如果我們項目請求的地址為 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’。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM