How do I enable CORS in Apache and Nginx

The CORS header is used to restrict cross-origin HTTP requests via scripts. However, in some cases it makes to enable CORS in Apache and Nginx for several Domains.

This can be useful for your WordPress website, for example, if you use WPML. Using the CORS header, you can then allow resources to be loaded from other domains so that they do not have to be stored twice (e.g. fonts, CSS & JS files, etc.).

This is how you can enable CORS on Apache Server #

To activate CORS for Apache, you either have to change the httpd.conf or expand your HTACCESS file. The HTACCESS variant only works if you have also activated mod_headers for Apache.

To activate CORS directly via httpd.conf, you have to add the following:

Header set Access-Control-Allow-Origin "*"

Alternatively, insert the following line in .HTACCESS:

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

This removes all restrictions, which means that other domains can also access data. Alternatively, you can only exclude individual domains from the restriction of the CORS header by adding the following line:

Header set Access-Control-Allow-Origin "https://meinedomain.de"

Likewise in HTACCESS:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://meinedomain.de"
</IfModule>

On the other hand, if you want to allow CORS for several domains, it becomes a bit more tricky, you have to add conditions to allow multiple domains. Have a look at the following lines to see how to add multiple domains in the httpd.conf file using conditions:

SetEnvIf Origin "http(s)?://(www\.)?(meinedomain.de|meineanderedomain.de)$" AccessControlAllowOrigin=$0$1
Header set Access-Control-Allow-Origin "%{AccessControlAllowOrigin}e" env=AccessControlAllowOrigin

This method can also be mapped in HTACCESS:

<IfModule mod_headers.c>
    SetEnvIf Origin "http(s)?://(www\.)?(meinedomain.de|meineandereodomain.example)$" AccessControlAllowOrigin=$0$1
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header set Access-Control-Allow-Credentials true
</IfModule>

Now all you have to do is save the changes and restart your Apache service.

This is how you can enable CORS on Nginx Server #

CORS can also be activated and changed with Nginx – the syntax is different compared to Apache. To enable CORS, you have to add the following line to the configuration file (e.g. /etc/nginx/conf.d/default.conf).

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

This will activate the Access Controll Allow Origin for any domain.

Alternatively, you can deactivate the restrictions of the CORS header only for certain domains. To do this, you have to explicitly specify the domain.

add_header Access-Control-Allow-Origin "https://meinedomain.de";

If, on the other hand, you want to exclude several domains from the restriction, you have to include a condition. Browser only allow one “Access-Control-Allow-Origin” header at once.

To dynamically integrate this condition, you can have a look at this code and adapt it to your specifications:

if ( $org ~* (https?://(.+\.)?(meinedomain1|meinedomain2|meinedomain3)\.(?:de|fr|com)$) ) {
   add_header "Access-Control-Allow-Origin" "$org";
}

That’s it already. Make sure to restart your Nginx service after saving the file for the changes to take effect.

Summary #

You should now be able to modify the CORS header for Apache and Nginx to fix possible errors. Although it is possible to create a wildcard for all domains, you should only activate the CORS header for individual domains for security reasons.

Do you have any comments or questions? Then please leave us a comment.