Vue跨域问题

问题描述：

在开发播放器过程中，调用酷狗音乐的接口获取数据，但是浏览器报错。

因为浏览器的同源机制导致跨域问题。

什么是跨域问题呢？

由于浏览器的同源机制。当前页面访问的域名，协议，端口号有一个不一致就会导致跨域。虽然跨域了，但是后端服务器还是返回了数据，浏览器发现跨域，为了安全会阻止数据移交。

怎么解决

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