Reactjs fetch request not working

JavaScript
1

Here is my codepen link:
RandomQuote Machine

Error I am getting in console:

Access to fetch at ‘https://zenquotes.io/api/random’ from origin ‘https://cdpn.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Not sure how to fix it. Any suggestions are greatly appreciated :slight_smile:

1 Like
2

Hi @daiwik. Try using a proxy server like:

const url = "https://zenquotes.io/api/random";
const proxy = "https://cors-anywhere.herokuapp.com/";

fetch( proxy + url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error.message))

At least it works on stackblitz. I hope it does on codepen as well.

1 Like