vue+axios跨域解決方案

標籤：.com   調試   跨域   proxy   alt   url   serve   hang   .json   

通過這種方法也可以解決跨域的問題。

 

使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）

 

例如請求的url:“http://f.apiplus.cn/bj11x5.json”

1、開啟config/index.js,在proxyTable中添寫如下代碼：

     

123456789

proxyTable: {   ‘/api‘: {  //使用"/api"來代替"http://f.apiplus.c"     target: ‘http://f.apiplus.cn‘, //源地址     changeOrigin: true, //改變源     pathRewrite: {       ‘^/api‘: ‘http://f.apiplus.cn‘ //路徑重寫       }   } }

2、使用axios請求資料時直接使用“/api”：

1234	getData () {  axios.get(‘/api/bj11x5.json‘, function (res) {    console.log(res)  })

通過這中方法去解決跨域，打包部署時還按這種方法會出問題。解決方案如下：

12345

let serverUrl = ‘/api/‘  //本地調試時 // let serverUrl = ‘http://f.apiplus.cn/‘  //打包部署上線時 export default {   dataUrl: serverUrl + ‘bj11x5.json‘ }

調試時定義一個serverUrl來替換我們的“/api”，最後打包時，只需要將“http://www.xxx.com”替換這個“/api”就可以了。 原網址：https://www.cnblogs.com/wangyongcun/p/7665687.html

vue+axios跨域解決方案