18

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.

Freude
  • 496
  • 1
  • 4
  • 11
  • You can't get rid of the problem whether or not you start an HTTP server. The API you're accessing isn't meant to be used from a browser, so disabling the browser's security feature is the only way to make it work from a browser. Depending on your use case you should consider just running the script without a browser (use node.js, but no need to start a server). – Paul Jan 20 '18 at 23:27

3 Answers3

5

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.

Daniel
  • 17,154
  • 10
  • 55
  • 72
0

Either mock Ajax calls, or start web server with reverse proxy and HTTP rewriting configured, since I'm sure you don't want, or have not access to configure API server CORS headers.

If you don't want to mock ajax calls, then use either:

  1. node-http-proxy
  2. nginx - if you don't have nodejs and you don't want to install it.
Milan Jaric
  • 5,298
  • 2
  • 22
  • 33
  • 1
    Hi, have you read the "without starting a local http server" in the OP question ? – GLAND_PROPRE Jun 16 '20 at 17:30
  • Yes I did! My answer still stands since CORS browser policy is applied even on `file://` protocol. And since you can not change HTTP headers "on you filesystem", then the only option is some kind of reverse proxy or webserver that should serve that file for you. – Milan Jaric Jun 17 '20 at 18:21
-4

If you can not set it up access-control-allow-origin, you can try this.

Use "callback" function if your data is not in same domain. And wrap your data "jsonCallback(" ... data ... ") as my example: http://www.ceducation.cz/akce-plnytext.json?short=1&callback=?

function jsonCallback(json) {
  $.each(json, function(key, val) {
    // your data is here
    console.log('date: ' + val.date);
    console.log('address: ' + val.address);
    console.log('---');
  });
}

$(document).ready(function() {

  $.getJSON("http://www.ceducation.cz/akce-plnytext.json?short=1&callback=?", function(data) {

  });

});

Working example

Tomáš Vlček
  • 33
  • 3