How to fix Access-Control-Allow-Origin (CORS origin) Issue


Written by Dennis Nind

Last published at: April 26th, 2019

What is CORS?

CORS is industry standard for accessing web resources on different domains. It is a very important security concept implemented by web browsers to prevent Javascript or CSS code from making requests against a different origin.

Let’s consider this scenario:

  • You have link from Domain1 which is opened in browser and asking for a JavaScript file from Domain2.
  • Now your web browser makes a call to Domain2.
  • If on Domain2, you have the policy to accept request like JavaScript or CSS from only Domain2 and ignore all requests from other domains, then your browser’s Domain1 request will fail with an error.

In a simple statement: If the request is not coming from the same domain or origin, just simply ignore it.

This is a very important feature which prevents hacking and resource stealing without the owners' knowledge.

Take a look at this below screenshot with error:

Mixed Content: The page was not loaded over HTTPS. This request has been blocked.

Mixed Content CORS origin error for site

The Solution

At Brixly, you have two ways of serving your website content. First, and the default is via a 'reverse Proxy' to Apache from NGINX. As such, .htaccess rules apply. If however, you are using the Bolt-Cache or CloudNS plugins, the process is done differently.

Default / Proxy (via .htaccess file)

If you need CORS enabled to run on your app you can enable it by adding the following lines in the .htaccess file in your hosting account.

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"

Other option is also enable the headers in your script if you are using PHP, for example:

header("Access-Control-Allow-Headers: Authorization, Content-Type");
header("Access-Control-Allow-Origin: *");
header('content-type: application/json; charset=utf-8');

If you are using the Bolt-Cache or CloudNS plugins to set native nginx, the following process applies.

Bolt-Cache / NGINX (via nginx.conf file)

To resolve this when using the CloudNS or Bolt-Cache plugins, you would need to do the following...

1.) Create a 'nginx.conf' file in the public_html directory for your domain

2.) Inside that nginx.conf' file, you would add the following...

add_header 'Access-Control-Allow-Origin' '*';

3.) Once added, go to cPanel -> CloudNS -> Server Settings -> user_config (set to 'enabled') 

4.) Press 'Reload' on the nginx.conf section to apply the changes