CORS request blocked in locally opened html

Question

I've started to write a HTML file which displays data with JavaScript. Since it shall be done as easy as possible I don't want to run nodejs oder any other local http server. I've just opened the HTML file in a browser (url is file:///home/visu/index.htm).

Everything is fine, till a jquery ajax request to a online API is done in the index.htm. The browser blocks the request with the message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://x.x.x.x. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)." 

How can I get rid of the problem without starting a local http server?

A possible solution is to start the browser with some "no security flags" or disable CORS with plugins, but this I've to do manually all the time so I don't like it.

Answer 1

When your browser will perform an AJAX request to a different server than the one hosting the current page, it first sends an OPTIONS HTTP message. In that message it sends the following header:

origin: http://my-web-server.com 

And the backend server will respond with:

access-control-allow-origin: http://my-web-server.com 

But, when you don't have a webserver, there is no address for your browser to put in that origin header. That's why your browser disallows you to do any AJAX request from a local file (maybe you can disable the browser's CORS security as someone mentioned in the comments, but that can put you at risk of malicious sites).

Another option

You can tell your browser to allow to connect from localhost to a backend if you change your backend to return the following header:

access-control-allow-origin: https://localhost:8888 

And, you also need to tell your localhost server to serve your page in HTTPS instead of HTTP. Once both conditions are met, CORS validations won't fail.

Notice that to enable HTTPS you'll need to have a SSL cert and key, you can generate them with the following command:

openssl req -x509 -out localhost.crt -keyout localhost.key \   -newkey rsa:2048 -nodes -sha256 \   -subj '/CN=localhost' -extensions EXT -config <( \    printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth") 

The source of that command and more information are found in this page from Let's Encrypt.