出现Cross-Origin Read Blocking (CORB) blocked cross-origin response 报错解决方法

1.错误分析

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

 

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

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

 

 

 

其实禁止跨域请求是浏览器自己的一种安全策略。

2.跨域资源共享（Cross-Origin-Resource-Sharing）

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

3.解决方法

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

咱们进入到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可能会被他们封禁