问题描述:
在开发播放器过程中,调用酷狗音乐的接口获取数据,但是浏览器报错。
因为浏览器的同源机制导致跨域问题。
什么是跨域问题呢?
由于浏览器的同源机制。当前页面访问的域名,协议,端口号有一个不一致就会导致跨域。虽然跨域了,但是后端服务器还是返回了数据,浏览器发现跨域,为了安全会阻止数据移交。
怎么解决
1.jsonp:利用<script>标签向不同域发送HTTP请求。
2.本地代理
浏览器是禁止跨域,但是服务器不禁止,所以前端在本地启动一个服务,作为请求的对象。在vue项目的根目录中创建vue.config.js文件。内容如下:
module.exports = {
devServer: {
// 配置多个代理
proxy: { //配置跨域
'/api': {
target: 'http://m.kugou.com/', //这里后台的地址模拟的;应该填写你们真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: {
/* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/singer 时
实际上访问的地址是:http://m.kugou.com//singer,因为重写了 /api
*/
'^/api': ''
}
},
}
}
};
在axios配置中,将请求根路径修改为:
// 配置请求的根路径
axios.defaults.baseURL = '/api'
重启之后,发起请求:
async getData() {
const { data: res } = await this.$axios.get("", {
params: { json: true },
});
console.log(res)
},
获取数据成功!
3.远程数据接口代理,比如jsonbird