Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Cors anywhere to reverse proxy and add CORS headers

I've been reading for two hours the documentation of this Reverse proxy to add CORS headers, and I'm not able to use. Can you please help with a simple example how to use that.

CORS-ANYWHERE

I've tried that example in a javascript

(function() {
var cors_api_host = 'cors-anywhere.herokuapp.com';
var cors_api_url = 'https://' + cors_api_host + '/';
var slice = [].slice;
var origin = window.location.protocol + '//' + window.location.host;
var open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
    var args = slice.call(arguments);
    var targetOrigin = /^https?:\/\/([^\/]+)/i.exec(args[1]);
    if (targetOrigin && targetOrigin[0].toLowerCase() !== origin &&
        targetOrigin[1] !== cors_api_host) {
        args[1] = cors_api_url + args[1];
    }
    return open.apply(this, args);
};
})();

I don't understand really if I need node.js or what exactly

like image 219
Stranger B. Avatar asked Apr 16 '15 09:04

Stranger B.


People also ask

How does CORS anywhere work?

CORS Anywhere does what it says on the tin – it enables cross-origin requests to “anywhere.” The best thing CORS Anywhere has going for it is its simplicity – in essence, all you have to do is prefix the URL with the API URL for CORS Anywhere, and the proxy will handle the request on your behalf with appropriate CORS ...

How do I add CORS support to API?

You can add CORS support to an API proxy by attaching an "Add CORS" policy to the API proxy when you create it. To add this policy, select the Add CORS headers checkbox in the Security page of the Build a Proxy wizard.


3 Answers

CORS Anywhere helps with accessing data from other websites that is normally forbidden by the same origin policy of web browsers. This is done by proxying requests to these sites via a server (written in Node.js, in this case).

"To use the API, just prefix the URL with the API URL.". That's really all of it. So, instead of requesting http://example.com, you will request https://cors-anywhere.herokuapp.com/http://example.com. CORS Anywhere will then make the request on behalf of your application, and add CORS headers to the response so that your web application can process the response.

The snippet from your question automatically modifies the URL for requests generated by XMLHttpRequest if needed. This snippet is not required, you can just prepend the CORS Anywhere API URL yourself, as done in the demo page.

The repository on Github (https://github.com/Rob--W/cors-anywhere) contains the source code of the server that powers CORS Anywhere. If you are a front-end dev, then that's all you need to know. If your application has many users, then you should host CORS Anywhere yourself, to avoid eating up all resources on the public CORS Anywhere server.

like image 110
Rob W Avatar answered Oct 09 '22 16:10

Rob W


I defer to Rob, but here is my attempt at an answer to your question.

(Rob, please feel free to correct this answer; and thank you for CORS Anywhere. It recently saved me a heap of trouble.)

  1. Install Node.js.
  2. Install CORS Anywhere.

    For example, at a command prompt, enter:

    npm install cors-anywhere

    (This example command installs CORS Anywhere under the current directory, in node_modules\cors-anywhere.)

  3. Run CORS Anywhere.

    For example, at a command prompt, enter:

    node cors-anywhere.js

CORS Anywhere responds with a message like this:

Running CORS Anywhere on 127.0.0.1:8080

(The IP address 127.0.0.1 is localhost; your computer.)

You can specify the port in an environment variable, but I chose to edit the value in my local copy of cors-anywhere.js.

Now, suppose you want to use a non-CORS-enabled web service at the following URL:

http://remote.server.com:8085/service

Instead of using that original URL, you use the CORS Anywhere domain and port, followed by the original URL as the path component:

http://localhost:8080/remote.server.com:8085/service

(You can omit the leading http:// from the original URL.)

like image 38
Graham Hannington Avatar answered Oct 09 '22 16:10

Graham Hannington


[I realize that the corsanywhere I am using is different from yours. I am using this one without the hyphen, corsanywhere and not cors-anywhere. So you can try this one if you like as it seems to still be working fine:

https://corsanywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=pizza&location=$dallas&sort_by=rating Edit: Seems like this (without hyphen) may not be the official version so use it with caution.]1

like image 5
Steven Avatar answered Oct 09 '22 16:10

Steven