CORS request blocked in locally opened html file

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)