Using cors-anywhere with local filesystem

[MegaMoo77]

Hi, Extreme newbie web developer here, so apologies in advance.

I had previously been using cors-anywhere with a local app I have built for myself, that I ran directly through the file system. With the recent disabling of the public server, I am now hosting my own instance of cors-anywhere. I have verified that if I deploy my client app to localhost, I can make the requests correctly. However, if I run through the file system directly (ie through file: syntax), the requests are blocked.

I would assume that this sort of request isn't possible, except that it was working previously with the public server :) Any idea what I'm missing?

[Rob--W]

How did you set up your own instance of CORS Anywhere? Which browser are you using?
What is the response that you're getting?

[MegaMoo77]

I followed the guide and deployed to a Heroku instance out of the box (though I did try a slight modification of removing the requireHeader parameter to see if it would fix the problem).

For browser, I've tried Chrome and Opera.

This is the response, indicating it's missing the origin (since it's coming from the filesystem):
Access to XMLHttpRequest at xxx from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains the invalid value 'null//undefined'.

[Rob--W]

Did you fork CORS Anywhere and change anything? The error message indicates that you're receiving a null//undefined value as the Access-Control-Allow-Origin response header, which is not possible with an out-of-the-box clone of this repository, as I unconditionally send *.

cors-anywhere/lib/cors-anywhere.js

Line 54 in 9f1af82

headers['access-control-allow-origin'] = '*';

[MegaMoo77]

Nope, I did not fork it, just cloned it and deployed it as is. Here is a full sample html file that I just threw together to verify:

<script>

(function() {
	var cors_api_host = 'murmuring-forest-35635.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);
	};
})();

var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', "https://github.com", true);
httpRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
httpRequest.onreadystatechange = function () {
	console.log(httpRequest.responseText);
};
httpRequest.send();
	
</script>

When I run this in localhost, it works as expected and prints the contents to the console. However, when I run it from the file system directly, it shows the error as described earlier:
test2.html:1 Access to XMLHttpRequest at 'https://murmuring-forest-35635.herokuapp.com/https://github.com' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains the invalid value 'null//undefined'.

Please let me know if I'm doing something wrong!

[MegaMoo77]

Also tried the following, which is more or less taken straight from the demo code, with as little modifications as possible - same result.

<script>

var cors_api_host = 'murmuring-forest-35635.herokuapp.com';
var cors_api_url = 'https://' + cors_api_host + '/';
(function() {
	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);
	};
})();

function doCORSRequest(options, printResult) {
    var x = new XMLHttpRequest();
    x.open(options.method, cors_api_url + options.url);
    x.onload = x.onerror = function() {
      printResult(
        options.method + ' ' + options.url + '\n' +
        x.status + ' ' + x.statusText + '\n\n' +
        (x.responseText || '')
      );
    };
    if (/^POST/i.test(options.method)) {
      x.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }
    x.send(options.data);
}

doCORSRequest({
	method: 'GET',
	url: "https://github.com",
	data: "",
  }, function printResult(result) {
	console.log(result);
  });
	
</script>

[Rob--W]

I cannot reproduce your issue in Chrome or Firefox.

Can you share a test case that reproduces the same issue in a clean install of either browser?

[MegaMoo77]

Interesting. The test code above reproduces the scenario in both Chrome and Opera for me, but I just tried Firefox and it works fine. It also works in Edge. You're able to run the above code in Chrome without an access denied error? I do know this used to work in both Chrome and Opera.

[Rob--W]

Works for me in both Firefox and Chrome, this includes Chromium 89.