How to Enable CORS in NGINX

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!