Como adiciono o Access-Control-Allow-Origin no NGINX?


158

Como defino o cabeçalho Access-Control-Allow-Origin para que eu possa usar fontes da web do meu subdomínio no domínio principal?


Notas:

Você encontrará exemplos deste e de outros cabeçalhos para a maioria dos servidores HTTP nos projetos HTML5BP Server Configs https://github.com/h5bp/server-configs


4
finalmente encontrei o local da resposta / {add_header Access-Control-Allow-Origin "*"; }
Chris McKee

Respostas:


183

O Nginx deve ser compilado com o http://wiki.nginx.org/NginxHttpHeadersModule (padrão no Ubuntu e em algumas outras distribuições do Linux). Então você pode fazer isso

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

Siga estas instruções caso queira implementar a mesma solução no apache: stackoverflow.com/questions/11616306/…
camilo_u

6
Esse módulo parece ser compilado por padrão (pelo menos no Ubuntu).
Steve Bennett

1
também compilado por padrão no amazon linux repo
Ross

1
Em qual arquivo e local devemos colocar essa diretiva de local?
Sumit Arora

1
Isso não funciona para mim. Nginx 1.10.0, Ubuntu 16.04
Omid Amraei

36

Uma resposta mais atualizada:

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

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

Você também pode adicionar Access-Control-Expose-Headers(no mesmo formato que cabeçalhos de controle de acesso e controle de acesso) para expor seus cabeçalhos personalizados e / ou 'não simples' a solicitações de ajax.

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/

Configura para outros servidores da web http://enable-cors.org/server.html


1
Alguma maneira de não precisar repetir essas linhas para todos os locais? Podemos colocá-lo sob o bloco do servidor {}?
geoyws

@geoyws (sem o @ eu não recebi uma notificação); você pode colocá-lo acima de localização, isso é :) bem
Chris McKee

access-control-
expose

3
Por favor, evite usar ifno nginx - até o manual oficial o desencoraja .
Agregado1166877

1
Gostaria de acrescentar que é útil adicionar alwaysopções a todos, add_headerpara que os cabeçalhos sejam adicionados também para respostas que não sejam 200. Desde o nginx 1.7.5: nginx.org/en/docs/http/ngx_http_headers_module.html
Mitar

11

Aqui está o artigo que escrevi que evita parte da duplicação do GET | POST. Isso deve levar você ao CORS no Nginx.

o controle de acesso nginx permite a origem

Aqui está o snippet de amostra da postagem:

server {
  listen        80;
  server_name   api.test.com;


  location / {

    # Simple requests
    if ($request_method ~* "(GET|POST)") {
      add_header "Access-Control-Allow-Origin"  *;
    }

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

    ....
    # Handle request
    ....
  }
}

2
De acordo com a política do SF, você precisa copiar as informações na postagem, não apenas vincular a elas. Os sites podem desaparecer a qualquer momento, o que seria perda de informações.
Tim

1
Ponto válido @tim, atualizado para incluir o código
gansbrest 17/04/2017

Considere usar o código de status, 204 No contentconforme parecer mais apropriado.
Slava Fomin II

7

Em primeiro lugar, deixe-me dizer que a resposta @hellvinz está funcionando para mim:

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

No entanto, eu decidi responder a essa pergunta com uma resposta separada, pois só consegui colocar essa solução em funcionamento depois de dedicar mais dez horas à procura de uma solução.

Parece que o Nginx não define nenhum tipo MIME de fonte (correto) por padrão. Seguindo essa tuorial , descobri que poderia adicionar o seguinte:

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

Para o meu etc/nginx/mime.typesarquivo. Como indicado, a solução acima funcionou.


2
Normalmente, eu iria apontar as pessoas para verificar o arquivo tipo mime em H5BP github.com/h5bp/server-configs-nginx/blob/master/mime.types :)
Chris McKee

4

A diretiva add_header tradicional do Nginx não funciona com respostas 4xx. Como ainda queremos adicionar cabeçalhos personalizados a eles, precisamos instalar o módulo ngx_headers_more para poder usar a diretiva more_set_headers, que também funciona com respostas 4xx.

sudo apt-get install nginx-extras

Em seguida, use more_set_headers no arquivo nginx.conf, colei minha amostra abaixo

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

1

Em alguns casos, você precisa usar add_headerdiretivas alwayspara cobrir todos os códigos de resposta HTTP.

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

Da documentação :

Se o parâmetro always for especificado (1.7.5), o campo do cabeçalho será adicionado independentemente do código de resposta.

Adiciona o campo especificado a um cabeçalho de resposta, desde que o código de resposta seja 200, 201 (1.3.10), 204, 206, 301, 302, 303, 304, 307 (1.1.16, 1.0.13) ou 308 (1.13 .0). O valor do parâmetro pode conter variáveis.


0

No meu caso, usando o Rails 5, a única solução de trabalho foi adicionar a rack-corsgema. Igual a:

in / Gemfile

# Gemfile
gem 'rack-cors'

em 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

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


como isso ajuda o nginx a exibir arquivos estáticos?
Walf

Eu estava usando o nginx como proxy reverso para servir o aplicativo Rails 5. Esse é um caso específico em que a restrição do CORS não vinha do nginx, mas do aplicativo Rails de origem por trás dele.
user9869932
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.