Axios and empty data field. Cross-Origin Read Blocking (CORB) blocked cross-origin response. CORS. | Piotr Sikora | Front End Developer JavaScript Enthusiast Piotr Sikora Kielce

Read Time:1 Minute, 35 Second

I had a situation last week with requests to server from Vue using Axios where data field has been empty. Server had CORS (Cross-Origin Resource Sharing) enabled.

The most important thing is that it was GET request ran in Chrome. When I ran my url in browser – there was response in JSON format. I’ve tested this request in Swagger and response was visible. Additionally I’ve tested it with curl and response was visible as well.

So next idea… lets check it in Firefox. And… it worked well! But what is going on with Chrome?

In console “warning” was visible:

Cross-Origin Read Blocking (CORB) blocked cross-origin response <MY_URL> with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

So what is CORB?

Cross-Origin Read Blocking (CORB) is an algorithm that can identify and block dubious cross-origin resource loads in web browsers before they reach the web page. CORB reduces the risk of leaking sensitive data by keeping it further from cross-origin web pages. In most browsers, it keeps such data out of untrusted script execution contexts. In browsers with Site Isolation, it can keep such data out of untrusted renderer processes entirely, helping even against side channel attacks like Spectre.
Source: https://www.chromestatus.com/feature/5629709824032768

And how to solve the issue?

Cross-Origin Read Blocking (CORB) blocked cross-origin response FIX

Make sure these resources are served with a correct “Content-Type” response header from the list below, as well as a “X-Content-Type-Options: nosniff” response header. These headers ensure Chrome can identify the resources as needing protection, without depending on the contents of the resources.
Source: https://www.chromium.org/Home/chromium-security/corb-for-developers

So easily said: