利用axios解决跨域的问题

1.问题原由

最近作一个项目 一个用vue 开发一个 Music-WebApp，由于 不是后台模拟数据 因此用的数据都是线上的。

因此去调用的接口，封装了一个 jsonp 代码以下

 

这里我调用的是qq音乐的一个接口

 

全部的的参数 都和qq音乐那边的保持一致。

当我 console.log所抓取数据时，查看控制台时发现了如下错误

 

 

2.错误分析

当我在浏览器打开我想要的接口的时候，发现没法查看数据

 

 

出现这种状况 说明 qq音乐设置Referer使咱们不能直接经过浏览器抓接口。

所以咱们要对Referer作一些改变

3.了解跨域资源共享（Cross-Origin-Resource-Sharing）

跨域资源共享（CORS）机制，是为了浏览器能更为安全的处理跨域请求，使其不受同源策略的限制。简单来讲就是把须要容许跨域的源写入response头里的Access-Control-Allow-Origin。对应的源就能够实现跨域资源共享了。

说到同源策略，不得不提到另一个概念——源（Origin）。那什么是源的呢？源实际上是是个域名（domain），通常请求网页的那个url的域名就会被制定为源——如此看来同源策略就能很容易理解了，就是限制Javascript的Ajax请求与源不相同的url。

4.解决方法

这里 我写了一个后端代理接口来解决这个问题

咱们进入到vue.config.js配置文件

首先要引入erpress这个包

 

 

注意vue 3.0 不会自带 express 要本身 npm。

同时咱们还要npm 一个 axios 这个相信你们都据说过

axios 基于promise用于浏览器和node.js的http客户端

 

而后开始写个人代理接口

 

 

 

咱们在这里引入qq音乐的接口地址,axios的具体使用方法在这里就不详细说明了百度本身搜索吧。

而后在咱们本身引用的就是本身写的

  

 

由于qq音乐设置 Referer 不能直接经过浏览器抓接口，可是防不了咱们这种后端代理的方式

配置完以后咱们打开控制台查看 这里显示Referer咱们本身的，而实际上已经修改为立qq音乐的Referer

 

 

这样就至关于欺骗了qq音乐，它就会认为是本身那边发出来的请求。

这时咱们在console.log

发现已经能够拿到数据了。

 

4.注意事项

不要使用过多的接口 当你的数据访问量过大 你的ip极可能被封禁