Find us
How can you configure Nginx to handle CORS (Cross-Origin Resource Sharing)? nginx

How can you configure Nginx to handle CORS (Cross-Origin Resource Sharing)?

Nov. 14, 2023
Akar Periwal

How to Configure Nginx for CORS (Cross-Origin Resource Sharing)

CORS (Cross-Origin Resource Sharing) is a mechanism implemented by web browsers to restrict cross-origin requests made by web applications. It is a security feature that can prevent a web page from making requests to a different domain from where it originated. However, there are scenarios where you may want to allow cross-origin requests for specific resources, and that's where Nginx comes into play.

Why do we need to configure CORS with Nginx?

Nginx is a popular web server that can be used as a reverse proxy or load balancer. It is commonly used to serve static content, handle SSL termination, and perform various other tasks in modern web application architectures. When Nginx acts as a proxy server, it can intercept and modify HTTP requests and responses, making it an ideal tool to handle CORS headers and enable cross-origin requests.

Configuring Nginx for CORS

To configure Nginx for CORS, you need to add specific headers to your server block or location block. The following steps will guide you through the setup:

Step 1: Edit Nginx configuration file

Open your Nginx configuration file using a text editor. The location of this file may vary depending on your distribution, but it is typically found in the /etc/nginx/ directory. The main configuration file is usually named nginx.conf or default.conf.

Step 2: Identify the server or location block

Inside the configuration file, locate the server or location block where you want to enable CORS. This block typically specifies the URL path or domain where the resource is being served.

Step 3: Add the necessary CORS headers

Add the following headers within the server or location block:

			location / {
			    if ($request_method = 'OPTIONS') {
			        add_header 'Access-Control-Allow-Origin' '*';
			        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
			
			        # Custom headers and headers various browsers *should* be OK with but aren't
			
			        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
			
			        # Tell client that this pre-flight info is valid for 20 days
			
			        add_header 'Access-Control-Max-Age' 1728000;
			        add_header 'Content-Type' 'text/plain; charset=utf-8';
			        add_header 'Content-Length' 0;
			        return 204;
			    }
			
			    if ($request_method = 'POST') {
			        add_header 'Access-Control-Allow-Origin' '*';
			        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
			        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
			        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
			    }
			
			    if ($request_method = 'GET') {
			        add_header 'Access-Control-Allow-Origin' '*';
			        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
			        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
			        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
			    }
			}

These headers allow requests from any origin, specify the allowed HTTP methods, and define additional headers that can be included in the request. Feel free to modify them based on your specific requirements.

Step 4: Save the changes and restart Nginx

Save the changes to the Nginx configuration file and restart Nginx to apply the new configuration. The command to restart Nginx might look like:

			sudo service nginx restart

Above command is an example and may vary based on your operating system and installation method.

Conclusion

Configuring Nginx to handle CORS is straightforward. By adding the appropriate headers, Nginx can enable cross-origin resource sharing and allow requests from different domains. This is useful when developing web applications that interact with APIs or when serving static files from different domains. Remember to adjust the configuration based on your application's specific needs and security requirements.

nginx