Server Fault is a question and answer site for system and network administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
1  
ah finally found the answer location / { add_header Access-Control-Allow-Origin "*"; } – Chris McKee Jul 20 '10 at 22:59
up vote 87 down vote accepted

Nginx has to be compiled with http://wiki.nginx.org/NginxHttpHeadersModule. Then you can do this

location ~* \.(eot|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}
share|improve this answer
    
Follow this instructions in case you want want to implement the same solution on apache: stackoverflow.com/questions/11616306/… – camilo_u Feb 5 '13 at 16:46
    
This link helped me out: gist.github.com/michiel/1064640 – meawoppl Sep 17 '13 at 2:35
3  
That module seems to be compiled by default (at least on Ubuntu). – Steve Bennett Sep 8 '14 at 13:25
1  
also compiled by default on amazon linux repo – Ross Sep 1 '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 8:45

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

share|improve this answer
    
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 5: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
    
access-control-expose-headers is missing here – chovy Dec 23 '15 at 19:45
    
@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 4 at 10:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.