API endpoint blocked by CORS policy for localhost

Trying to fetch Openwhyd Data Export API https://openwhyd.org/hot?format=json using React with JS fetch() method (https://reactjs.org/docs/faq-ajax.html), 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.

Do you have any headers added to the API endpoints to allow usage on localhost?

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

<bountysource-plugin>

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[adrienjoly]

Thank you for your help, Victor! 🙌

FYI, I just found out that, even if we enable CORS for this endpoint, Chrome does not support sending AJAX requests from localhost, even if CORS was enabled for *. (see https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin and https://bugs.chromium.org/p/chromium/issues/detail?id=67743#c47)

Workarounds:

• start Chrome with the --allow-file-access-from-files --disable-web-security flags
• use another browser

Note: Either way, CORS should be enabled on openwhyd’s backend first.

[victorWeiFreelancer]

according to this https://stackoverflow.com/questions/36878255/allow-access-control-allow-origin-header-using-html5-fetch-api, cors needs to be activated from server side. The fetch config { mode: ‘no-cors’} is not going to help. I’m trying to add cors on server side