React fetch has error fetch was blocked by CORS policy

Question

I tried to have a login button click call a fetch REST call.

However, the problem is that the fetch fails, with this error message in the Javascript console.

// Access to fetch from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource // If an opaque serves your need set the requests mode to 'no-cors' to fetch the resource with CORS disabled. // Exception Failed to Fetch.

Why is this happening, and why can't I call a REST call from a Button click in React?

private handleLogin = () => {

    console.log("button submit");

    // Access to fetch from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
    // If an opaque serves your need set the requests mode to 'no-cors' to fetch the resource with CORS disabled.
    // Exception Failed to Fetch.
    fetch('https://gturnquist-quoters.cfapps.io/api/random')
    .then((res) => {
        if (res.status >= 400) {
            throw new Error("Bad response from server");
        }
        return res.json();
    })
    .then((stories) => {
        console.log(stories);
    });


    this.props.login(this.state);


}

Answer 1

The API you're trying to call doesn't allow to be called from a browser via AJAX. It needs to set specific headers to indicate which ajax requests are allowed.

More here: https://gturnquist-quoters.cfapps.io/api/random