Nginx how enable CORS for multi origins ?

cross-posted from: programming.dev/post/18360806

Hi everyone,

I would like to enable Cross-Origin Resource Sharing on my Nginx server. for few origins (cors requestor)/domains.

I’ve found this article juannicolas.eu/how-to-set-up-nginx-cors-multiple-… that is nice, but not complete and on my browser seem really hard to read due to the layout 🤮

So I’ve opened a CodeBerg git repository for the good soul that want to perfect this piece of code the allow the most of use to use CORS with Nginx.

codeberg.org/…/CORS_MultiDomains.py

If you don’t want to create an account on codeberg feel free to post your code here !

<span style="color:#323232;">server {
</span><span style="color:#323232;">    # Server
</span><span style="color:#323232;">
</span><span style="color:#323232;">    map "$http_origin" $cors { # map in Nginx is somewhat like a switch case in a programming language.
</span><span style="color:#323232;">        default ''; #Seem to set $cors to '' empty string if none of the follwing rexeg match ?
</span><span style="color:#323232;">        "~^https://([w-_.]+.)?example.com$" "$http_origin";
</span><span style="color:#323232;">            #regex domain match
</span><span style="color:#323232;">            # ~ mean I suppose the string is RegEx ?
</span><span style="color:#323232;">            # Need to come with a RegEx expression that match https://anything.example.com[optional ports and Query string ?X=Y]
</span><span style="color:#323232;">        "~^https://([w-_.]+.)?example2.com$" "$http_origin"; #regex domain match
</span><span style="color:#323232;">        }
</span><span style="color:#323232;">               
</span><span style="color:#323232;">
</span><span style="color:#323232;">    location /static {
</span><span style="color:#323232;">        
</span><span style="color:#323232;">        # if preflight request, we will cache it
</span><span style="color:#323232;">        if ($request_method = 'OPTIONS') {
</span><span style="color:#323232;">            add_header 'Access-Control-Max-Age' 1728000; #20 days
</span><span style="color:#323232;">            add_header 'Content-Type' 'text/plain charset=UTF-8';
</span><span style="color:#323232;">            add_header 'Content-Length' 0;
</span><span style="color:#323232;">            return 204; #https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/204 }
</span><span style="color:#323232;">
</span><span style="color:#323232;">        if ($cors != "") {
</span><span style="color:#323232;">            add_header 'Access-Control-Allow-Origin' "$cors" always; # <-- Variable $cors
</span><span style="color:#323232;">            add_header 'Access-Control-Allow-Credentials' 'true' always;
</span><span style="color:#323232;">            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
</span><span style="color:#323232;">            add_header 'Access-Control-Allow-Headers' 'Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With' always;}
</span><span style="color:#323232;">
</span><span style="color:#323232;">       # configuration lines...
</span><span style="color:#323232;">
</span><span style="color:#323232;">    }
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">}
</span>