Solution to cross origin read blocking (CORB) blocked cross origin response error

1. Error analysis

Here I am calling an interface of qq music


All the parameters are consistent with those of qq music.

When I fetched data from console.log, I found the following error when viewing the console



In fact, prohibiting cross-domain requests is a security policy of the browser itself.

2. Cross-Origin-Resource-Sharing

The cross-domain resource sharing (CORS) mechanism is for the browser to process cross-domain requests more safely, so that it is not restricted by the same-origin policy. Simply put, it is to write the source that needs to allow cross-domain access to the Access-Control-Allow-Origin in the response header. The corresponding source can realize cross-domain resource sharing.

3. Solution

Here I wrote a back-end proxy interface to solve this problem

We enter the vue.config.js configuration file

First, we must introduce the erpress package


Note that vue 3.0 does not come with express and requires its own npm.

At the same time, we also need an axios in npm. I believe everyone has heard of it.

axios is a http client for browsers and node.js based on promise


Then I started writing my proxy interface


We introduce here the interface address of qq music, the specific method of using axios here will not elaborate on Baidu’s own search.

Then what we quoted in ourselves is written by ourselves



Because qq music setting Referer cannot directly capture the interface through the browser, but it cannot prevent our back-end proxy method

share pictures

After the configuration, we open the console to check that the Referer is our own, but actually it has been modified to set up the Referer of qq music



This is equivalent to cheating qq music, and it will think it is a request from its own side.

At this time, we are in console.log



Found that the data is already available.


Similar Posts: