Vue-cli 創建的項目如何跨域請求

感謝 BeArchitect 的技術支持

 

問題描述：

使用 Vue-cli 創建的項目，開發地址是 localhost:8023，需要訪問 localhost:9000 上的接口

 

分析原因：

不同域名之間的訪問，需要跨域才能正確請求。跨域的方法很多，通常都需要后台配置

不過 Vue-cli 創建的項目，可以直接利用 Node.js 代理服務器，實現跨域請求

 

解決方案：

接口地址原本為 /form/save，但是為了匹配代理地址，在前面加一個 /api

 

如果使用了 axios，可以全局配置一個 baseURL，這樣就不用挨個兒修改 url 了

axios.defaults.baseURL = '/api'

 

在 config>index.js 的 dev 中添加配置項 proxyTable：

 proxyTable: { '/api': { target: 'http://127.0.0.1:9000/', changeOrigin: true, pathRewrite: { '^/api': '/' } } },

其中 '/api' 為匹配項，target 為被請求的地址

因為在 ajax 的 url 中加了前綴 '/api'，而原本的接口是沒有這個前綴的

所以需要通過 pathRewrite 來重寫地址，將前綴 '/api' 轉為 '/'

如果本身的接口地址就有 '/api' 這種通用前綴，就可以把 pathRewrite 刪掉