0

Trying to fetch Openwhyd Data Export API endpoint https://openwhyd.org/hot?format=json using React with JS fetch(), but it doesn't run on localhost:3000, it gives the following error:

Access to fetch at 'https://openwhyd.org/hot?format=json' from origin 'http://localhost:3000' 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.

If there is a way to fix from within the React App?

Part of my code that fetches the API:

  // fetch the data from the API endpoint
  componentDidMount() {
    fetch('https://openwhyd.org/hot?format=json'})
    .then(res => res.json())
    .then(
      (result) => {
        console.log(result);
      }
    )
  }

I tried using mode: "no-cors", but then the respose from the API fetch() is not usable for data output.

OS: maciOS Mojave Version 10.14.5 Browser: Chrome Version 84.0.4147.89 (Official Build) (64-bit)

Olga Brushuk
  • 1
  • 1
  • 1
    See the *How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems* section of the answer at https://stackoverflow.com/a/43881141/441757. The gist of it is, you can either set up a CORS proxy of your own, or else you can change the URL in your fetch request like this: `fetch('https://cors-anywhere.herokuapp.com/https://openwhyd.org/hot?format=json')` – sideshowbarker Jul 25 '20 at 22:28

1 Answers1

0

If their API does not provide the CORS headers and their API does not support JSONP then your only option is to proxy the request through your own server. In this scenario you would add a endpoint to your backend application that makes the request to openwhyd. Then you would make all your requests from your front end to your backend. Alternatively, you could setup a nginix/apache in front of your application to do the proxy for you.

Deadron
  • 5,135
  • 1
  • 16
  • 27