By default, cross domain requests (also called CORS – Cross Origin Resource Sharing) are disabled in NGINX. You need to enable CORS in NGINX to allow cross-domain requests in NGINX. Here’s how to allow CORS in NGINX to allow cross domain requests in NGINX.
How to Enable CORS in NGINX
Here are the steps to enable CORS in NGINX.
In order to allow CORS in NGINX, you need to add add_header Access-Control-Allow-Origin directive in server block of your NGINX server configuration, or virtual host file.
1. Open NGINX Server Configuration
Open terminal and run the following command to open NGINX server configuration file.
$ sudo vi /etc/nginx/nginx.conf
If you have configured separate virtual hosts for your website (e.g www.website.com), such as /etc/nginx/sites-enabled/website.conf then open its configuration with the following command
$ sudo vi /etc/nginx/sites-enabled/website.conf
Bonus Read : How to Install NGINX in Ubuntu
2. Enable CORS in NGINX
Add add_header directive to server block of your NGINX configuration file.
server{
...
add_header Access-Control-Allow-Origin *;
...
}
There are different configuration options available for enabling CORS in NGINX.
Enable CORS from all websites
If you want to enable CORS for all websites, that is, accept cross domain requests from all websites, add the following
add_header Access-Control-Allow-Origin *;
In the above statement, we use wildcard (*) for NGINX Access-Control-Allow-Origin directive
Bonus Read : How to Enable TLS 1.3 in NGINX
Enable CORS from one domain
If you want to enable CORS for one website domain (e.g example.com), specify that domain in place of wildcard character *.
add_header Access-Control-Allow-Origin "example.com";
Enable CORS from multiple domains
If you want to enable CORS for multiple domains (e.g example1.com, example2.com,example3.com), specify them separately one after another
add_header Access-Control-Allow-Origin "example1.com"; add_header Access-Control-Allow-Origin "example2.com"; add_header Access-Control-Allow-Origin "example3.com";
Enable CORS from localhost
If you want to enable CORS from localhost, add 127.0.0.1 or localhost in place of domain name
add_header Access-Control-Allow-Origin "localhost";
Bonus Read : How to Fix 500 Internal Server Error in NGINX
3. Restart NGINX Server
Finally, run the following command to check syntax of your updated config file.
$ sudo nginx -t
If there are no errors, run the following command to restart NGINX server.
$ sudo service nginx reload #debian/ubuntu $ systemctl restart nginx #redhat/centos
You can use free online tools like Test CORS to test if your website accepts CORS.
That’s it! Hopefully the above tutorial will help you enable CORS in NGINX.
Ubiq makes it easy to visualize data in minutes, and monitor in real-time dashboards. Try it today!
