Introduction
Modern web applications often interact with APIs, static assets, and services hosted on different domains or subdomains. Browsers enforce a security mechanism called the Same-Origin Policy (SOP), which prevents web pages from making requests to resources hosted on a different origin unless explicitly permitted.
To allow these cross-domain requests, web servers must return specific HTTP headers known as Cross-Origin Resource Sharing (CORS) headers. When these headers are missing, browsers display errors such as:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
This error is commonly seen in browser developer tools such as Google Chrome DevTools, Mozilla Firefox Developer Tools, and Microsoft Edge Developer Tools.
In this guide, we will explain how to enable CORS in NGINX by adding the required HTTP headers and configuring the server to allow cross-origin requests.
What is CORS?
Cross-Origin Resource Sharing (CORS) is a browser security feature that allows a web application running on one domain to access resources hosted on another domain.
Example:
https://app.example.com
requesting data from:
https://api.example.com
Without CORS headers, the browser blocks the request even if the server is reachable.
Common CORS Error
You may encounter errors similar to:
Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy.
or
No 'Access-Control-Allow-Origin' header is present.
These errors indicate that the server is not returning the required CORS headers.
Prerequisites
Before proceeding, ensure that:
- NGINX is installed and running.
- You have root or sudo access.
- You know which virtual host or website requires CORS support.
If NGINX is not installed, refer to:
- Ubuntu 16.04 NGINX Installation Guide
- CentOS 7 NGINX Installation Guide
Locate the NGINX Configuration File
Depending on the operating system and NGINX setup, the configuration file may be located in:
/etc/nginx/sites-enabled/default
or
/etc/nginx/conf.d/default.conf
Open the configuration file:
vi /etc/nginx/sites-enabled/default
Enable CORS for GET Requests
Inside the appropriate server block, locate:
location / {
}
Add the following configuration:
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,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
}
This configuration instructs NGINX to return the required CORS headers whenever a GET request is received.
Explanation of the Headers
Access-Control-Allow-Origin
add_header 'Access-Control-Allow-Origin' '*';
Allows requests from any domain.
To restrict access to a specific domain:
add_header 'Access-Control-Allow-Origin' 'https://example.com';
Access-Control-Allow-Methods
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
Defines which HTTP methods are permitted.
Access-Control-Allow-Headers
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
Specifies which custom request headers may be sent by the client.
Access-Control-Expose-Headers
add_header 'Access-Control-Expose-Headers' 'Content-Length';
Allows JavaScript applications to access specific response headers.
Verify NGINX Configuration
Before restarting the service, validate the syntax:
nginx -t
Expected output:
nginx: configuration file syntax is ok nginx: configuration file test is successful
Restart NGINX
Apply the changes:
systemctl restart nginx
Verify the service status:
systemctl status nginx
Test the Configuration
You can verify the headers using curl:
curl -I https://your-domain.com
Example response:
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, OPTIONS
If these headers appear, CORS has been configured successfully.
Security Considerations
Using:
Access-Control-Allow-Origin: *
allows requests from any website.
For production environments, it is recommended to specify trusted domains:
Access-Control-Allow-Origin: https://app.example.com
This reduces the risk of unauthorized cross-origin access.
Conclusion
Cross-Origin Resource Sharing (CORS) is an essential component of modern web applications that interact with APIs, external services, and shared resources across domains. By configuring the appropriate CORS headers in NGINX, administrators can safely enable cross-domain communication while maintaining browser security requirements. Always validate your configuration, test the returned headers, and restrict access to trusted domains whenever possible to ensure a secure and reliable deployment.
Frequently Asked Questions (FAQ)
1. What causes the “No Access-Control-Allow-Origin header” error?
This error occurs when a browser attempts to access a resource hosted on a different origin and the server does not return the required CORS headers.
2. Can I allow multiple domains in NGINX CORS configuration?
Yes. You can use variables, maps, or conditional logic to allow specific domains instead of using the wildcard (*) option.
Example:
add_header 'Access-Control-Allow-Origin' 'https://example.com';
3. Do I need to restart NGINX after changing the configuration?
Yes. Configuration changes take effect only after reloading or restarting NGINX.
systemctl restart nginx
or
nginx -s reload
Related Articles
- Setting Different Document Roots for Subdirectories in NGINX
Learn how to serve different applications and websites using separate document roots within NGINX.
https://pheonixsolutions.com/blog/setting-different-documentroot-subdirectory-nginx/ - Allow Cross-Origin Resource Sharing (CORS) for Fonts in NGINX
Configure NGINX to properly serve web fonts across multiple domains and avoid browser font-loading restrictions.
https://pheonixsolutions.com/blog/allow-cross-origin-regioncors-fonts-nginx/ - Install NGINX on a cPanel Server
Step-by-step guide to installing and configuring NGINX alongside cPanel for improved web server performance.
https://pheonixsolutions.com/blog/install-nginx-cpanel-server/