Fixing the Error: “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”
It is common to encounter the “No ‘Acces-Control-Allow-Origin’ header is present on the requested resource” error when fetching API data. It looks something like this:
A great solution exists for resolving this error. The error often occurs when a making a fetch to an API that has implemented CORS restrictions.
What do you do when you have no control over the CORS policies of the backend server?
On examination of the
Access-Control-Allow-Origin documentation, it seems like this issue can be resolved by simply adding the wildcard header:
For requests without credentials, the literal value “
*" can be specified, as a wildcard; the value tells browsers to allow requesting code from any origin to access the resource. Attempting to use the wildcard with credentials will result in an error.
The fetch will often be unsuccessful and the initial error will still appear. If you manage to use the wildcard header without error, make sure to be advised of the security implications.
Another solution involves using a Chrome plugin which — if you can get it to work with the API — would not be a suitable for production since you can’t expect users to install a browser plugin to use basic features of your app.
A common solution is to use cors-anywhere by appending
cors-anywhere.herokuapp.com to the start of your fetch url in order to create a proxy. This is just an example proxy though. Heroku’s Acceptable Use Policy doesn’t allow for the deployment of a publicly-accessible proxy, so that specific version of the proxy has rate limiting.
You can use the same exact code to spin up the same proxy on a local server and/or host it on Heroku if using it in production (in which case you can whitelist the url of your front end app to avoid having to follow the rate limiting requirement).
With cors-anywhere you can spin up your own proxy and resolve the error in just a few minutes.
Instructions for using cors-anywhere in a React.js app
- Install the node module:
npm i cors-anywhere
- Serve the proxy from within the node module:
cd node_modules/cors-anywhere/lib/ && npm run start.
- The proxy url is probably
- Append the URL of the proxy to the start of all URLs to which the fetch is being made. It might look something like this:
The error should now be resolved. Make the fetch again, and the requested data will be fetched as desired.
To use the app in production, deploy the proxy with Heroku, then change the proxy url (appended to the start of the fetch url) to the new url of the deployed proxy.
Heroku’s “Acceptable Use Policy forbids the use of Heroku for operating an open proxy, so make sure that you either enforce a whitelist or rate-limit the number of requests.”
The cors-anywhere GitHub repository has instructions for how to do this.
Optional simplification for a development environment
Set the proxy to spin up automatically by modifying the
start script to run both commands using the Concurrently module:
npm i concurrently
- Change the start script in the package.json file to:
“start”: “concurrently \”react-scripts start\” \”cd node_modules/cors-anywhere/lib/ && npm run start\””,
The proxy will now boot up automatically with no extra effort.