20181216——Vue中解決跨域
阿新 • • 發佈:2018-12-23
沒想到自己還是遇到這個問題了。
不算後臺的解決方案,單算前端如何解決跨域
用http-proxy-middleware 代理解決(專案使用vue-cli腳手架搭建)
例如請求的url:“http://f.apiplus.cn/bj11x5.json”
1、開啟config/index.js,在proxyTable中添寫如下程式碼:
proxyTable: { '/api': { //使用"/api"來代替"http://f.apiplus.c" target: 'http://f.apiplus.cn', //源地址 changeOrigin: true, //改變源 pathRewrite: { '^/api': 'http://f.apiplus.cn' //路徑重寫 } } }
使用axios請求資料時直接使用“/api”:
getData () {
axios.get('/api/bj11x5.json', function (res) {
console.log(res)
})
通過這中方法去解決跨域,打包部署時還按這種方法會出問題。解決方法如下:
let serverUrl = '/api/' //本地除錯時
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上線時
export default {
dataUrl: serverUrl + 'bj11x5.json'
}
這回應該沒什麼問題了