CODEWITHSUNDEEP
reactjsgoogle-chromeaxioscorscross-origin-read-blocking
Kyle Ma
Kyle Ma

Reputation: 489

How to fix: CORB block for google chrome (Axios request)

I'm using Django with Rest framework and React to make a call to this API url.

I already enabled CORS, however, the axios request is still blocked by CORB.

Also tried to temporarily disable it, by starting Chrome with the following command line flag:

--disable features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

Here is the code:

    componentDidMount() {
    const articleID = this.props.match.params.articleID;
    axios.get(`http://127.0.0.1:8000/api/${articleID}`, {
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET',
            'Content-Type': 'application/json',
            'X-Content-Type-Options': 'nosniff'
        }
    }).then(res => {
        this.setState({
            article: res.data
        });
        console.log(`http://127.0.0.1:8000/api/${articleID}`);
        //console.log(res.data);
    });
}

This is the error

WARNING: Cross-Origin Read Blocking (CORB) blocked cross-origin response http://127.0.0.1:8000/api/1 with MIME type application/json.

Upvotes: 1

Views: 2214

Answers (2)

Fotios Basagiannis
Fotios Basagiannis

Reputation: 1501

How to defeat CORB and allow javascript to access local web server running on localhost (127.0.0.1) over XHR:

  1. Select a random domain and point it to 127.0.0.1 in your HOSTS file
  2. Direct your XHR connections to that domain instead of 127.0.0.1
  3. You will need to enable SSL/TLS on your local web server. a) If you are coding your own sockets server in C here is a guide on how to SSL enable them. b) Or you can base your simple local server on a light web server that supports SSL/TLS out of the box: abyssws I chose this faster solution and had it serve files dynamically dumped out by my existing logic to specific doc paths under the server's root.
  4. You will need to make sure that your local server's responses always include this CORS header: Access-Control-Allow-Origin: *

It should be working now.

Upvotes: 1

Kyle Ma
Kyle Ma

Reputation: 489

SOLVED: added Allow-Control-Allow-Origin extension to my chrome browser and specified URL pattern. For example, localhost:8000/* and http://127.0.0.1:8000/* should be able to connect. If CORB error comes up, there's no way but to disable the chrome browser security for me :(

Upvotes: 0

Related Questions