How to Allow Access-Control-Allow-Origin in NGINX


allow access-control-allow-origin nginx

By default, web browsers don’t allow websites to send requests to other domains, unless the other domain actually accepts such requests. However, sometimes, you may need to configure your website to process requests from other domains. Allowing requests from a different domain is known as Cross-Origin Resource Sharing and is done by setting the Access-Control-Allow-Origin header. Let us take a look at how to allow Access-Control-Allow-Origin in NGINX.

 

 

How to Allow Access-Control-Allow-Origin in NGINX

Here are the steps to allow Access-Control-Allow-Origin in NGINX. We need to use the ngx_http_headers_module module for this purpose.

It should be installed by default, when you install NGINX. In case you are using an old version (<1.13) then you can install it separately

 

1. Install ngx_http_headers_module

Open a terminal session, or SSH into your Linux system and run the following command


$ sudo apt-get install nginx-extras

 

2. Update NGINX config file

Open the nginx config file in a text editor


$ sudo vim /etc/nginx/nginx.conf

 

Add the following lines to enable CORS.


location / {
 add_header Access-Control-Allow-Origin *;
}

If you want to accept requests from only specific domain/sub domain, then update ‘*’ to the domain/sub domain you want


location / {
 add_header Access-Control-Allow-Origin example2.com;
}

 

If you want a more detailed and up-to-date config then use the one below.


#
# Wide-open CORS config for nginx
#
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';
}
}

Again, if you only want to accept requests from a specific domain/sub domain, replace ‘*’ with a domain/sub domain

 

3. Reload NGINX Server

Reload NGINX server to apply changes.


$ sudo service nginx reload

 

That’s it! Now NGINX will accept requests from other domains/sub-domains.

 

About Sreeram Sreenivasan

Sreeram Sreenivasan is the Founder of Ubiq, a business dashboard & reporting platform for small & medium businesses. Ubiq makes it easy to build business dashboards & reports for your business. Try it for free today!