Cross-Origin Read Blocking Error in reactjs

Question

I'm learning ReactJS. I'm using fetch for getting data from an API. I used below code for it.

 fetch('http://myurl.com/api')
              .then(res => res.json())
              .then(res => console.log(res));

The API is hitting with status 200 ok but in response Nothing to Preview and in console getting below error

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

I also added headers in below code.

 fetch("http://xxx.xxx.xxx.xxx:8081/api/category/popular",{
                 method: 'GET',
                  headers: {
                    'Access-Control-Allow-Origin': '*',
                  },
              })

I have below json in API response

  {  
   "data":[  
      {  
         "parent_id":"5c2f74e0a4d846591b2b1a40",
         "icon":"http://myurl.in:8081/default.png",
         "_id":"5c2f74e8a4d846591b2b1a41",
         "name":"Shop",
         "modified_at":"2019-01-04T14:59:52.791Z",
         "created_at":"2019-01-04T14:59:52.791Z"
      },
      {  
         "parent_id":"5c2f74e0a4d846591b2b1a40",
         "icon":"http://myurl.in:8081/default.png",
         "_id":"5c2f7566a4d846591b2b1a42",
         "name":"Home Service",
         "modified_at":"2019-01-04T15:01:58.507Z",
         "created_at":"2019-01-04T15:01:58.507Z"
      },
      {  
         "parent_id":"5c2f74e0a4d846591b2b1a40",
         "icon":"http://myurl.in:8081/default.png",
         "_id":"5c5c2dd30d017c401ec17253",
         "name":"Test",
         "modified_at":"2019-02-07T13:08:35.653Z",
         "created_at":"2019-02-07T13:08:35.653Z",
         "__v":0
      }
   ]
}

Possible duplicate of [Cross-Origin Read Blocking (CORB)](https://stackoverflow.com/questions/50873764/cross-origin-read-blocking-corb) — Sagar P. Ghagare, Feb 19 '19 at 13:16
"Nothing to Preview" — So the response is blank, which means it isn't valid JSON, so it bounces of a security feature. Even if it didn't, it would throw a parsing error because it isn't valid JSON. You need to fix the API so it returns some actual JSON. We can't tell you how to do that because your server side code is missing. — Quentin, Feb 19 '19 at 13:17
See that, I think it can help you >> https://stackoverflow.com/questions/52728346/cors-corb-issue-with-react-node-express-and-google-oauth — silvio leite, Feb 19 '19 at 13:20
@SagarKodte — Is it expressed in JSON? Is the request with "Nothing to Preview" for a GET request or is there an OPTIONS request? Are there any *other* error messages? — Quentin, Feb 19 '19 at 13:23
Re edit: `'Access-Control-Allow-Origin': '*',` is a **response** header, it has no place on the request and will trigger the requirement for a preflight OPTIONS reqest if you try to put one there. — Quentin, Feb 19 '19 at 13:27
You need to provide a [mcve] that demonstrates the problem (this includes all the details of the response, not just a description of it). — Quentin, Feb 19 '19 at 13:28
Read this https://developer.mozilla.org/tr/docs/Web/HTTP/CORS. You can use addon for override CORS restrictions. Search for CORS Everywhere. The header has to be set at server, you can't do it on client side. Additionally you can use a proxy like https://cors-anywhere.herokuapp.com/ — Orhan Cinar, Feb 19 '19 at 13:37

score 0 · Answer 1 · answered Feb 19 '19 at 13:16

0

Normally The CORS header (requires server changes) you need to set the allowed request domain in the API server.

answered Feb 19 '19 at 13:16

silvio leite

84
5

score -1 · Answer 2 · answered May 08 '19 at 06:07

Cross-Origin Read Blocking (CORB). It is designed to prevent the browser from delivering certain cross-origin network responses to a web page.

First Make sure these resources are served with a correct "Content-Type", i.e, for JSON MIME type - "text/json", "application/json", HTML MIME type - "text/html".

Second: set credentials to same-origin

 fetch("https://example.com/api/request", {
            method: 'GET',
            body: JSON.stringify(data),
            credentials: "same-origin", //include, same-origin
            headers: {Accept: 'application/json', 'Content-Type': 'application/json',},
        })
    .then((data) => data.json())
    .then((resp) => console.log(resp))
    .catch((err) => console.log(err))

Cross-Origin Read Blocking Error in reactjs

2 Answers2