CORS / cross origin API request blocked by header of requested resource?

[NicholasKyleHoffman]

Access to XMLHttpRequest at 'http://api.openrates.io/latest?base=USD&symbols=GBP' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

** FROM axios API call in Converter.js:41
Oops, something broke with GET in convertHandler() - we've got a: Network Error

[NicholasKyleHoffman]

This is blocking the core functionality of converting To / From currencies!

[NicholasKyleHoffman]

WORKAROUND NOTE - working app at: ()

I updated the GET in convertHandler to pull
FROM: http://api.openrates.io.... CURRENT URL in Git Project ->
TO: 'https://api.openrates.io...." in codesandbox (which is https://codesand....)
& it works... It has to do with CORS & requesting resources -

Dev environment: localhost vs. http vs. https workarounds:

"You’ve run afoul of the Same Origin Policy – it says that every AJAX request must match the exact host, protocol, and port of your site. Things that might cause this:

• Hitting a server from a locally-served file (a request from file:///YourApp/index.html to http://api.awesome.com)
• Hitting an external API (a request from http://yourapp.com to http://api.awesome.com).
• Hitting an internal API (a request from http://yourapp.com to http://api.yourapp.com).
• Hitting a different port on the same host (webapp is on http://localhost:3000, API is http://localhost:4000)
• Requesting over http from https or vice-versa (requesting https://yourapp.com from http://yourapp.com)

References: