Vue跨域請求
阿新 • • 發佈:2019-02-05
問題描述:
使用 Vue-cli 建立的專案,開發地址是 localhost:8023,需要訪問 localhost:9000 上的介面
分析原因:
不同域名之間的訪問,需要跨域才能正確請求。跨域的方法很多,通常都需要後臺配置
不過 Vue-cli 建立的專案,可以直接利用 Node.js 代理伺服器,實現跨域請求
解決方案:
介面地址原本為 /form/save,但是為了匹配代理地址,在前面加一個 /api
如果使用了 axios,可以全域性配置一個 baseURL,這樣就不用挨個兒修改 url 了
axios.defaults.baseURL = '/api'
在 config>index.js
proxyTable: {
'/api': {
target: 'http://127.0.0.1:9000/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
其中 '/api' 為匹配項,target 為被請求的地址
因為在 ajax 的 url 中加了字首 '/api',而原本的介面是沒有這個字首的
所以需要通過 pathRewrite 來重寫地址,將字首 '/api' 轉為 '/'
如果本身的介面地址就有 '/api' 這種通用字首,就可以把 pathRewrite 刪掉