How do I enable CORS in Apache and Nginx

The CORS hea­der is used to rest­rict cross-ori­­gin HTTP requests via scripts. Howe­ver, in some cases it makes to enable CORS in Apa­che and Nginx for seve­ral Domains.

This can be useful for your Word­Press web­site, for exam­p­le, if you use WPML. Using the CORS hea­der, you can then allow resour­ces to be loa­ded 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 acti­va­te CORS for Apa­che, you eit­her have to chan­ge the httpd.conf or expand your HTACCESS file. The HTACCESS vari­ant only works if you have also acti­va­ted mod_headers for Apa­che.

To acti­va­te CORS direct­ly via httpd.conf, you have to add the fol­lo­wing:

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

Alter­na­tively, insert the fol­lo­wing line in .HTACCESS:

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

This remo­ves all rest­ric­tions, which means that other domains can also access data. Alter­na­tively, you can only exclude indi­vi­du­al domains from the rest­ric­tion of the CORS hea­der by adding the fol­lo­wing line:

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

Like­wi­se 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 seve­ral domains, it beco­mes a bit more tri­cky, you have to add con­di­ti­ons to allow mul­ti­ple domains. Have a look at the fol­lo­wing lines to see how to add mul­ti­ple domains in the httpd.conf file using con­di­ti­ons:

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 map­ped 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 chan­ges and restart your Apa­che ser­vice.

This is how you can enable CORS on Nginx Server #

CORS can also be acti­va­ted and chan­ged with Nginx — the syn­tax is dif­fe­rent com­pared to Apa­che. To enable CORS, you have to add the fol­lo­wing line to the con­fi­gu­ra­ti­on file (e.g. /etc/nginx/conf.d/default.conf).

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

This will acti­va­te the Access Con­troll Allow Ori­gin for any domain.

Alter­na­tively, you can deac­ti­va­te the rest­ric­tions of the CORS hea­der only for cer­tain domains. To do this, you have to expli­cit­ly spe­ci­fy the domain.

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

If, on the other hand, you want to exclude seve­ral domains from the rest­ric­tion, you have to include a con­di­ti­on. Brow­ser only allow one “Access-Con­­trol-Allow-Ori­­gin” hea­der at once.

To dyna­mi­cal­ly inte­gra­te this con­di­ti­on, you can have a look at this code and adapt it to your spe­ci­fi­ca­ti­ons:

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

That’s it alre­a­dy. Make sure to restart your Nginx ser­vice after saving the file for the chan­ges to take effect.

Summary #

You should now be able to modi­fy the CORS hea­der for Apa­che and Nginx to fix pos­si­ble errors. Alt­hough it is pos­si­ble to crea­te a wild­card for all domains, you should only acti­va­te the CORS hea­der for indi­vi­du­al domains for secu­ri­ty reasons.

Do you have any comm­ents or ques­ti­ons? Then plea­se lea­ve us a com­ment.