1.问题:
在vue中,在使用Axios获取数据时,有时会出现数据无法访问的情形(即跨域问题),如例1所示:
例1:在本地使用 Axios 来获取豆瓣上的数据
this.$axios({
method: 'get', //以 get 方式获取数据
url: 'http://api.douban.com/v2/movie/top250' //此处为豆瓣上的数据
}).then(res => {
console.log(res) //成功则返回请求的结果
}).catch(err => {
console.log(err) //失败则返回错误信息
})
此时运行项目,在控制台中会得到如下提示信息:即是存在 跨域 问题
2.解决方法:
打开vue项目文件夹下的build目录,打开webpack.dev.conf.js:
选中 proxy 选项 ( 大概在第41行的位置 ),然后再打开 config/index.js 文件
在 proxyTable: { } 中设置跨域请求即可
第一步:设置proxyTable:
proxyTable: {
'/douban_api':{
target: 'http://api.douban.com',
pathRewrite: {
'^/douban_api': ''
},
changeOrigin: true
}
},
第二步:在main.js中进行下一步的设置:
Vue.prototype.HOST = '/douban_api'
第三步:更改组件中数据的请求参数:
let url = this.HOST + '/v2/movie/top250' //进行地址的拼接
this.$axios({
method: 'get',
url: url
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
第四步:打开浏览器,在控制台即可看到正确的输出结果
此时跨域问题成功解决