Friday, April 12, 2019

reactjs - React fetch has error fetch was blocked by CORS policy

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);



}

No comments:

Post a Comment

plot explanation - Why did Peaches' mom hang on the tree? - Movies & TV

In the middle of the movie Ice Age: Continental Drift Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...