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 刪掉