HTTPS Blocked By CORS policy? Solution with CORS-anywhere

Blocked by CORS policy: No ‘Access-control-Allow-Origin’ header is present on the requested resource error!!!

Cross-Origin Resource Sharing (CORS) is a standard that allows a server to relax the same-origin policy. This is used to explicitly allow some cross-origin requests while rejecting others. For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn’t necessarily easy and may present some challenges. (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors)

The error could be solved with the help of herokuapp.com.

cors-anywhere npm

The url to proxy is literally taken from the path, validated and proxied. The protocol part of the proxied URI is optional, and defaults to “http”. If port 443 is specified, the protocol defaults to “https”.

This package does not put any restrictions on the http methods or headers, except for cookies. Requesting user credentials is disallowed. The app can be configured to require a header for proxying a request, for example to avoid a direct visit from the browser. (https://www.npmjs.com/package/cors-anywhere )

Example

// Listen on a specific host via the HOST environment variable
var host = process.env.HOST || '0.0.0.0';
// Listen on a specific port via the PORT environment variable
var port = process.env.PORT || 8080;

var cors_proxy = require('cors-anywhere');
cors_proxy.createServer({
    originWhitelist: [], // Allow all origins
    requireHeader: ['origin', 'x-requested-with'],
    removeHeaders: ['cookie', 'cookie2']
}).listen(port, host, function() {
    console.log('Running CORS Anywhere on ' + host + ':' + port);
});

Request examples:

• http://localhost:8080/http://google.com/ - Google.com with CORS headers

How I approached upto here?

I opened my project folder in the visual code studio. I opened the terminal and go to my directory. I installed the cors-anywhere there.

npm i cors-anywhere

screenshot of npm i cors-anywhere

npm install cors-anywhere in terminal

See inside the node_module folder. You could see the new node package inside it, named as cors-anywhere:

cors-anywhere inside node_module

You can also see the different js code inside cors-anywhere>lib

You could see this error when fetching the data from the server. When you clicked in

const layerUrl =‘https://cors-anywhere.herokuapp.com/https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/RecentEarthquakesRendered/MapServer/0';

When you clicked the link in the console, it will redirect to something like this, mentioning request temporary access to the demo server. After you access, the problem of CORS would be solved

If there are many request, it will also lead to an error in herokuapp. Hence it would be better to host our own local server to do the job

Though herokuapp solved the problem but its a temporary and also the herokuapp couldn’t bear too many server request. Hence it is important to create our own cors server. For that we should go to the directory of node_module>cors-anywhere>lib. When open a new terminal and run the cors-anywhere script under lib by using node cors-anywhere.js

node cors-anywhere.js

You can start the server by using npm start. After that cors anywhere would run in a server localhost:8080

http://localhost:8080/

localhost:8080 seems like this

After this you add the http://localhost:8080/ instead of https://cors-anywhere.herokuapp.com in front of your server URL.

const layerUrl =‘http://localhost:8080/https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/RecentEarthquakesRendered/MapServer/0';

You can now go to your main folder and run the test as:

npm run test

npm run test and server running at localhost:1234

No any cors-error after cors-anywhere

I tried to get the earthquake data from the ArcGIS rest feature server and I had a similar problem with CORS blockage. At last, I could solve the problem in this way. Hence it should be helpful to you too.

My final output MAP