If you’re interested in a detailed understanding of how Cross-Origin Resource sharing works, we’ve written an informative guide you can read here

Now, to set up Cross-Origin Resource sharing CORS in Nginx, you will need to follow the following steps:

STEP #1: Open the NGINX Server Configuration file

Open the terminal and run the following command to open the Nginx server configuration file.

sudo nano /etc/nginx/nginx.conf

If your Nginx configuration file is located in a different directory path like in sites-enabled you can use a command that looks like this below:

sudo nano /etc/nginx/sites-enabled/new_config.conf

In the above command, the new_config.conf is the custom configuration file for the Nginx setup. It’s important to note that you can give your Nginx configuration file any name as long as it has the .conf file extension.

STEP #2: add the CORS directive

So, to enable CORS in Nginx server, you will have to add the add_header Access-Control-Allow-Origin directive in the configuration file as seen below:

server{
   ...
   add_header Access-Control-Allow-Origin *;
   ...
}

The above configuration will enable CORS for all websites and they will be able to access cross-domain requests.

Enable CORS from one domain

If you want to enable CORS from one domain, then you can use the following configuration in Nginx

add_header Access-Control-Allow-Origin "example.com";

Enable CORS from multiple domains

You can also define multiple domains and allow CORS requests as seen below:

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 the domain name:

add_header Access-Control-Allow-Origin "localhost";

STEP #3: Test Nginx for Syntax errors

After editing the Nginx configuration file, it’s always important to first test it for syntax errors by running the following command on your terminal:

 sudo nginx -t

If your Nginx setup doesn’t have any syntax errors, then you will need to restart it so the new changes on the server can reflect: Here are the commands:

For Debian systems like Ubuntu, the following command is used to restart Nginx:

sudo service nginx reload

For Redhat systems and CentOs, here is the command to restart Nginx:

systemctl restart nginx

STEP #4: Testing Your CORS Configuration

The easiest way to test if your website allows CORS is by using an online tool called Test-CORS.org

Alternatively, you can also use the curl on your terminal to test CORS. The curl tool can send a simple GET request and examine the response headers for CORS-related information. See the command below:

curl -v http://your_domain.com 

When you run the curl tool targeting your domain, you will be able to see the Access-Control-Allow-Origin header with the value of the origin you specified in the request. The absence of these headers or their values can provide insights into the CORS configuration. See the image below:

Test CORS preflight request

CORS preflight requests are sent by the browser before making an actual cross-origin request. You can simulate this using the curl tool with the OPTIONS method.

curl -X OPTIONS -H "Origin: http://your-origin.com" -H "Access-Control-Request-Method: GET" -H "Access-Control-Request-Headers: Authorization" http://your-nginx-server.com/path/to/resource

Make sure to replace the placeholders (http://your-nginx-server.com, http://your-nginx-server.com/path/to/resource) with your actual server URL, origin, and resource path.

Check the response headers for Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, etc., to ensure that they are configured correctly for the specified origin.

More related articles to explore

• A beginner’s Guide to Cross-origin Resource Sharing (CORS)
• How to enable Cross-Origin Resource Sharing in Apache Server?