How to activate CORS in Apache and Nginx

The CORS hea­der is used to rest­rict cross-ori­­gin HTTP requests via scripts. In some cases, howe­ver, it makes sen­se to adapt this rest­ric­tion.

This can be useful for your Word­Press web­site, for exam­p­le, if you use WPML. You can then use the CORS hea­der to allow resour­ces to be loa­ded from other domains so that they do not have to be pro­vi­ded twice (e.g. fonts, CSS & JS files, etc.).

How to activate CORS with Apache #

To acti­va­te CORS for Apa­che, you must eit­her chan­ge httpd.conf or extend your HTACCESS file. Howe­ver, 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 must 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, allo­wing other domains to retrie­ve data. Alter­na­tively, you can also exclude indi­vi­du­al domains from the CORS hea­der rest­ric­tion by inser­ting the fol­lo­wing line:

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

Again, the HTACCESS vari­ant:

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

Howe­ver, if you want to allow CORS for seve­ral domains, it gets a litt­le more com­pli­ca­ted, then you have to store the who­le thing in httpd.conf as fol­lows:

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, see here:

<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 you just need to save the chan­ges and restart your Apa­che ser­vice.

How to activate CORS with Nginx #

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

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

If you want to acti­va­te it for all domains.

Alter­na­tively, you can deac­ti­va­te the CORS hea­der rest­ric­tions for spe­ci­fic domains only. To do this, you must expli­cit­ly spe­ci­fy the domain. The who­le thing then looks some­thing like this:

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

Howe­ver, if you want to exclude seve­ral domains from the rest­ric­tion, you must include a query for this. This is becau­se brow­sers only allow an “Access-Con­rol-Allow-Ori­­gin” hea­der.

To inte­gra­te the who­le thing dyna­mi­cal­ly, you can use this code and adapt it to your spe­ci­fi­ca­ti­ons:

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

Tha­t’s about it. Remem­ber to restart your Nginx ser­vice after saving the file to app­ly the chan­ges.

Conclusion #

You should now be able to chan­ge 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.