Navigating CORS: Enabling Multi-Origin Integration with NGINX

In today’s web landscape, the seamless integration of resources hosted across different domains is increasingly essential for modern web applications. However, ensuring security while facilitating such intercommunication poses a significant challenge. This is where Cross-Origin Resource Sharing (CORS) policies step in, serving as a vital mechanism to enable secure cross-origin communication.

At its core, CORS operates through configurations both on the client and server sides. Here, we’ll focus on implementing multiple origin CORS policies within NGINX configuration files, elucidating the fundamental HTTP headers utilized in both preflight and actual requests.

Let’s delve into the key HTTP headers employed in this process:

• Access-Control-Allow-Origin: Defines which origins are permitted to interact with the resources.
• Access-Control-Allow-Methods: Specifies the allowed methods for communication with resources, encompassing common methods such as GET, PUT, POST, DELETE, and OPTIONS.
• Access-Control-Allow-Headers: Identifies the headers that clients are permitted to utilize in actual requests.
• Access-Control-Allow-Credentials: Determines whether the response to the request can be exposed when the credentials flag is set to true.

Now, let’s explore the configuration setup for multiple origins within NGINX:

#Map the needed frontend URLS to the cors variable
map "$http_origin" $cors {
  default '';
  "~^https?://frontend.azurestaticapps.net?$" "$http_origin";
  "~^https?://frontend.com?$" "$http_origin";
  "~^https?://appweb.frontend.com?$" "$http_origin";
}
    server {
        listen 443;
        server_name test-api.com;
        root  /usr/share/nginx/html;
        #Other Configurations below
        ......................
        ....................
        ................
        ..............
        ...........



        location /api {
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_pass http://main-api:8080;
            if ($cors != "") {
                 add_header 'Access-Control-Allow-Origin' "$cors" always;
                 add_header 'Access-Control-Allow-Credentials' 'true' always;
                 add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
                 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;add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,company-code' always;
                 add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
            }
#Preflight Request
            if ($request_method = 'OPTIONS') {
                 add_header 'Access-Control-Allow-Origin' "$cors" always;
                 add_header 'Access-Control-Allow-Credentials' 'true' always;
                 add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
                 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;add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,company-code' always;
                 add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

                 add_header 'Access-Control-Max-Age' 1728000;
                 add_header 'Content-Type' 'text/plain; charset=utf-8';
                 add_header 'Content-Length' 0;
                 return 204;
                }

        }

        location /test-api/ {
            rewrite ^(.*)/test-api(.*)$ $1$2 break;
            proxy_pass http://test-api:8080;
        }

    }

By leveraging these configurations effectively, developers can foster seamless communication between resources hosted on diverse domains while upholding robust security standards.