How do I add Access-Control-Allow-Origin in NGINX?

Question

How do I set the Access-Control-Allow-Origin header so I can use web-fonts from my subdomain on my main domain?

---

Notes:

You'll find examples of this and other headers for most HTTP servers in the HTML5BP Server Configs projects https://github.com/h5bp/server-configs

• Chris McKee: ah finally found the answer location / { add_header Access-Control-Allow-Origin "*"; }
• bfredo123: I had a similar issue, but to address a maintenance mode with a 503 status, and then the headers were not set (4xx, 5xx statuses). Adding 'always' fixed that: add_header Access-Control-Allow-Origin * always;

Answer 1

Nginx has to be compiled with http://wiki.nginx.org/NginxHttpHeadersModule (default on Ubuntu and some other Linux distros). Then you can do this

location ~* \.(eot|ttf|woff|woff2)$ {
 add_header Access-Control-Allow-Origin *;
}

• Steve Bennett: That module seems to be compiled by default (at least on Ubuntu).
• Ross: also compiled by default on amazon linux repo
• Sumit Arora: In which file and location we should put this location directive ?
• Omid Amraei: It doesn't work for me. Nginx 1.10.0, Ubuntu 16.04
• 0xC0DEGURU: @SumitArora in /etc/nginx/conf.d/default.conf I guess ...

Answer 2

wildcard cors

A more up-to-date answer:

#
# Wide-open CORS config for nginx
#
location / {
 if ($request_method = 'OPTIONS') {
 add_header 'Access-Control-Allow-Origin' '*';
 #
 # Om nom nom cookies
 #
 add_header 'Access-Control-Allow-Credentials' 'true';
 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,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 #
 # 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-Credentials' 'true';
 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';
 }
 if ($request_method = 'GET') {
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Credentials' 'true';
 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';
 }
}

source: https://michielkalkman.com/snippets/nginx-cors-open-configuration.html

You may also wish to add Access-Control-Expose-Headers (in the same format as Access-Control-Allow-Headers) in order to expose your custom and/or 'non-simple' headers to ajax requests.

Access-Control-Expose-Headers (optional) - The XMLHttpRequest 2 object has a getResponseHeader() method that returns the value of a particular response header. During a CORS request, the getResponseHeader() method can only access simple response headers. Simple response headers are defined as follows:

Cache-Control Content-Language Content-Type Expires Last-Modified Pragma If you want clients to be able to access other headers, you have to use the Access-Control-Expose-Headers header. The value of this header is a comma- delimited list of response headers you want to expose to the client.

http://www.html5rocks.com/en/tutorials/cors/

Configs for other web servers http://enable-cors.org/server.html

---

Access-Control-Allow-Credentials

If you're using Access-Control-Allow-Credentials with your CORS request you'll want the cors header wiring within your location to resemble this. As the origin has to match the client domain, wildcard doesn't work.

if ($http_origin = ''){
 set $http_origin "*";
}
proxy_hide_header Access-Control-Allow-Origin;
add_header Access-Control-Allow-Origin $http_origin;

• geoyws: Any way to not have to repeat these lines for every location? Can we put it under the server {} block?
• Chris McKee: @geoyws (without the @ I didnt get a notification); you could put it above location, thats fine :)
• chovy: access-control-expose-headers is missing here
• aggregate1166877: Please avoid using if in nginx - even the official manual discourages it.
• Mitar: I would like to add that it is useful to add always option to all add_header so that headers are added also for non-200 responses. Since nginx 1.7.5: nginx.org/en/docs/http/ngx_http_headers_module.html

Answer 3

Here is the article that I wrote which avoids some of the duplication for GET|POST. It should get you going with CORS in Nginx.

nginx access control allow origin

Here is the sample snippet from the post:

server {
 listen 80;
 server_name api.test.com;
 location / {
 # Preflighted requests
 if ($request_method = OPTIONS ) {
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, HEAD';
 add_header 'Access-Control-Allow-Headers' 'Authorization, Origin, X-Requested-With, Content-Type, Accept';
 return 200;
 }
 if ($request_method ~* '(GET|POST)') {
 add_header 'Access-Control-Allow-Origin' '*';
 }
 # Handle request
 # ...
 }
}

• Tim: As per SF policy you need to copy the information into the post, not just link to it. Websites can disappear at any time, which would be loss of information.
• gansbrest: Valid point @tim, updated to include the code
• Slava Fomin II: Consider using status code 204 No content as it seems more appropriate.
• piotrekkr: Access-Control-Allow-Origin: * does not work with Access-Control-Allow-Credentials: true because for credentials to work origin must be exactly the same as sent in CORS request (not *). See fetch.spec.whatwg.org/#http-cors-protocol
• Chris McKee: @piotrekkr you're looking for ``` if ($http_origin = ''){ set $http_origin "*"; } proxy_hide_header Access-Control-Allow-Origin; add_header Access-Control-Allow-Origin $http_origin; ``` in order to do that. gist.github.com/ChrisMcKee/f0816222acf0692526d01a7e82b6651d

Answer 4

In some cases you need to use add_header directives with always to cover all HTTP response codes.

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

From documentation:

If the always parameter is specified (1.7.5), the header field will be added regardless of the response code.

Adds the specified field to a response header provided that the response code equals 200, 201 (1.3.10), 204, 206, 301, 302, 303, 304, 307 (1.1.16, 1.0.13), or 308 (1.13.0). Parameter value can contain variables.

• Climax: This fixed it for me. 404 caused the header to not be added, which then caused a client's agent to behave strangely.
• Nico Serrano: This work out for me but I needed to add proxy_hide_header Access-Control-Allow-Origin; before add_header .... I used https://cors-test.codehappy.dev/ to debug it.

Answer 5

Firstly, let me say that @hellvinz answer is working for me:

location ~* \.(eot|ttf|woff|woff2)$ {
 add_header Access-Control-Allow-Origin *;
}

However, I have decided to answer this question with a separate answer as I only managed to get this solution working after putting in about ten more hours looking for a solution.

It seems that Nginx doesn't define any (correct) font MIME types by default. By following this tuorial I found I could add the following:

application/x-font-ttf ttc ttf;
application/x-font-otf otf;
application/font-woff woff;
application/font-woff2 woff2;
application/vnd.ms-fontobject eot;

To my etc/nginx/mime.types file. As stated, the above solution then worked.

• Chris McKee: I'd usually point people to check the mime type file on H5BP github.com/h5bp/server-configs-nginx/blob/master/mime.types :)
• Suraj Jeswara: this didnt fix my issue. I did the change in mime.type file and also in the nginx.conf file inside /etc/nginx

Answer 6

Nginx's traditional add_header directive doesn't work with 4xx responses. As we still want to add custom headers to them, we need to install the ngx_headers_more module to be able to use the more_set_headers directive, which also works with 4xx responses.

sudo apt-get install nginx-extras

Then use more_set_headers in the nginx.conf file, i have pasted my sample below

server {
 listen 80;
 server_name example-site.com;
 root "/home/vagrant/projects/example-site/public";
 index index.html index.htm index.php;
 charset utf-8;
 more_set_headers 'Access-Control-Allow-Origin: $http_origin';
 more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, HEAD';
 more_set_headers 'Access-Control-Allow-Credentials: true';
 more_set_headers 'Access-Control-Allow-Headers: Origin,Content-Type,Accept,Authorization';
 location / {
 if ($request_method = 'OPTIONS') {
 more_set_headers 'Access-Control-Allow-Origin: $http_origin';
 more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, HEAD';
 more_set_headers 'Access-Control-Max-Age: 1728000';
 more_set_headers 'Access-Control-Allow-Credentials: true';
 more_set_headers 'Access-Control-Allow-Headers: Origin,Content-Type,Accept,Authorization';
 more_set_headers 'Content-Type: text/plain; charset=UTF-8';
 more_set_headers 'Content-Length: 0';
 return 204;
 }
 try_files $uri $uri/ /index.php?$query_string;
 }
 location = /favicon.ico { access_log off; log_not_found off; }
 location = /robots.txt { access_log off; log_not_found off; }
 access_log off;
 error_log /var/log/nginx/example-site.com-error.log error;
 sendfile off;
 client_max_body_size 100m;
 location ~ \.php$ {
 fastcgi_split_path_info ^(.+\.php)(/.+)$;
 fastcgi_pass unix:/var/run/php5-fpm.sock;
 fastcgi_index index.php;
 include fastcgi_params;
 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
 fastcgi_intercept_errors off;
 fastcgi_buffer_size 16k;
 fastcgi_buffers 4 16k;
 }
 location ~ /\.ht {
 deny all;
 }
}

• Linga: This killed the nginx
• Infobuscador: OMG, many thanks. You just saved me! 3 hours looking for a solution
• crowne: You can add 'always' at the end of the the add_header directive - see nginx.org/en/docs/http/ngx_http_headers_module.html

Answer 7

In my case adding the Access Control with a wildcard header didn't work. I ended up having to set the proxy header with my web apps host and Access Control header with the origin set. Here's an example that worked for me:

location /service {
 proxy_pass http://graphql-server:8080;
 proxy_set_header Origin http://graphql-server:8080;
 proxy_hide_header Access-Control-Allow-Origin;
 add_header Access-Control-Allow-Origin "$http_origin" always;
}

Answer 8

In my case, using Rails 5, the only working solution has been adding the rack-cors gem. Like so:

in /Gemfile

# Gemfile
gem 'rack-cors'

in config/initializers/cors.rb

# config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
 allow do
 origins 'localhost:4200'
 resource '*',
 headers: :any,
 methods: %i(get post put patch delete options head)
 end
end

source: https://til.hashrocket.com/posts/4d7f12b213-rails-5-api-and-cors

• Walf: how does that help nginx serve static files?
• user9869932: I was using nginx as a reverse proxy to serve the rails 5 app. This is a particular case where the CORS restriction was not coming from nginx but from the origin Rails App behind it.

Answer 9

I spent the last few days banging my head against the wall trying to resolve this issue, but could never get it to work.

Reason: I was loading the nginx website in a jQuery div tag. I am going to assume this is not allowed for CORS.

Solution: Load the nginx page in an IFRAME.

<iframe 
src="https://stream.website.com:9443/Radio.html" 
title="Your Channel"></iframe>

Using this method, there is no need for CORS code in your site-enabled/website.

I hope this will help someone, as it sure made my morning when I decided to use it.