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

ah finally found the answer location / { add_header Access-Control-Allow-Origin "*"; } — Chris McKee, Jul 20 '10 at 22:59
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; — bfredo123, Nov 06 '22 at 11:06

score 288 · Accepted Answer · edited Oct 20 '16 at 10:54

288

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 *;
}

edited Oct 20 '16 at 10:54

XtraSimplicity

129

answered Sep 01 '10 at 00:25

hellvinz

3,326
2
20
9

Follow this instructions in case you want want to implement the same solution on apache: http://stackoverflow.com/questions/11616306/css-font-face-absolute-url-from-external-domain-fonts-not-loading-in-firefox – camilo_u Feb 05 '13 at 16:46
This link helped me out: https://gist.github.com/michiel/1064640 – meawoppl Sep 17 '13 at 02:35
11

That module seems to be compiled by default (at least on Ubuntu). – Steve Bennett Sep 08 '14 at 13:25
2

also compiled by default on amazon linux repo – Ross Sep 01 '15 at 21:16
Took me ages to realise why this wasn't working, but then I realised Font Awesome is a woff2 so I had to use eot|ttf|woff|woff2 – Adam Nov 28 '15 at 08:45
doesn;t work for me .. latest nginx version – JoaMika Sep 04 '16 at 22:17
2

In which file and location we should put this location directive ? – Sumit Arora Jan 17 '17 at 14:11
2

It doesn't work for me. Nginx 1.10.0, Ubuntu 16.04 – Omid Amraei Jun 17 '17 at 07:04
Works fine on Nginx 1.12.2, Debian 8.10. – user276648 Jan 03 '18 at 02:33
1

@SumitArora in /etc/nginx/conf.d/default.conf I guess ... – 0xC0DEGURU Mar 11 '21 at 19:34
"Then you can do this" - and what would "do this" mean exactly? What file should be edited? It is not clear from your answer. Please keep newbies in mind when writing SO answers. – Paul Jul 19 '21 at 17:04
Note, nginx only uses one location directive. For those who don't find this solution work, your file may match multiple location directives and nginx unfortunately chooses to use an unexpected one. – Gqqnbig Oct 08 '22 at 06:02
For my own future reference, and anyone else who needs this: this goes into the server { /* here */ } part, not into a location / { /* not here */ } – LinusG. Nov 04 '22 at 08:34

score 86 · Answer 2 · edited Apr 24 '25 at 14:03

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;

Any way to not have to repeat these lines for every location? Can we put it under the server {} block? — geoyws, Oct 11 '15 at 05:05
@geoyws (without the @ I didnt get a notification); you could put it above location, thats fine :) — Chris McKee, Dec 17 '15 at 15:12
@chovy its an optional header to expose non defaults to ajax requests but I can see it tripping people up so duly added. Ta — Chris McKee, Jan 04 '16 at 10:13
Please avoid using if in nginx - even the official manual discourages it. — aggregate1166877, May 22 '18 at 10:43
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: https://nginx.org/en/docs/http/ngx_http_headers_module.html — Mitar, Feb 27 '19 at 18:48
I'm not sure wildcard (*) ACAO header will work with Access-Control-Allow-Credentials set. — adamczi, Jan 05 '21 at 10:56
@adamczi It will not work. For credentials to work, origin need to be exact origin sent in CORS request. https://fetch.spec.whatwg.org/#http-cors-protocol — piotrekkr, Jul 26 '21 at 07:21
@ChrisMcKee this is best answer ever. Just add all headers via nginx. Thank you very much! — Andrew Louis, May 20 '22 at 22:08

score 42 · Answer 3 · edited Jun 18 '24 at 00:07

42

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
    # ...
}
}

edited Jun 18 '24 at 00:07

Serious Angel

165

answered Apr 17 '17 at 21:15

gansbrest

905

4

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. – Tim Apr 17 '17 at 22:07
3

Valid point @tim, updated to include the code – gansbrest Apr 17 '17 at 22:58
3

Consider using status code 204 No content as it seems more appropriate. – Slava Fomin II Jan 21 '19 at 11:00
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 https://fetch.spec.whatwg.org/#http-cors-protocol – piotrekkr Jul 26 '21 at 07:18

@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.

https://gist.github.com/ChrisMcKee/f0816222acf0692526d01a7e82b6651d

– Chris McKee Jul 27 '21 at 08:51

@ChrisMcKee I'm using add_header Access-Control-Allow-Origin $http_origin to achieve that. If $http_origin is empty then no header will be sent. – piotrekkr Jul 27 '21 at 10:04
@piotrekkr yeah depends on your needs; I added to my answer the formatted version; which is instead of nothing you get a wildcard for other requests (helpful for variable response i.e. html widgets and json responses from one endpoint) – Chris McKee Jul 27 '21 at 16:06
It does not work – Darius.V Aug 30 '21 at 07:09

score 30 · Answer 4 · answered Aug 17 '19 at 11:46

30

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.

answered Aug 17 '19 at 11:46

laimison

649

This fixed it for me. 404 caused the header to not be added, which then caused a client's agent to behave strangely. – Climax Aug 06 '21 at 15:07
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. – Nico Serrano Jul 01 '22 at 16:01

score 13 · Answer 5 · edited Aug 04 '17 at 01:40

13

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.

edited Aug 04 '17 at 01:40

Matthew Read

131

answered Jan 04 '17 at 15:24

DazBaldwin

231

2

I'd usually point people to check the mime type file on H5BP https://github.com/h5bp/server-configs-nginx/blob/master/mime.types :) – Chris McKee Jan 11 '17 at 17:06
this didnt fix my issue. I did the change in mime.type file and also in the nginx.conf file inside /etc/nginx – Suraj Jeswara Jul 08 '20 at 04:56

score 10 · Answer 6 · edited Aug 07 '18 at 19:07

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;
    }
}

OMG, many thanks. You just saved me! 3 hours looking for a solution — Infobuscador, Apr 12 '22 at 13:16
You can add 'always' at the end of the the add_header directive - see https://nginx.org/en/docs/http/ngx_http_headers_module.html — crowne, Jul 05 '24 at 14:42

score 4 · Answer 7 · answered Feb 04 '22 at 17:41

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;
}

score 0 · Answer 8 · answered Apr 23 '25 at 13:24

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.

score 0 · Answer 9 · answered May 04 '18 at 23:07

0

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

answered May 04 '18 at 23:07

user9869932

213

how does that help nginx serve static files? – Walf Oct 03 '18 at 04:52
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. – user9869932 Oct 03 '18 at 10:39

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

9 Answers9

wildcard cors

Access-Control-Allow-Credentials