1. 程式人生 > >20181216——Vue中解決跨域

20181216——Vue中解決跨域

沒想到自己還是遇到這個問題了。
不算後臺的解決方案,單算前端如何解決跨域
用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' 
}

這回應該沒什麼問題了