Pregunta ¿Cómo agrego Access-Control-Allow-Origin en NGINX?


¿Cómo configuro el encabezado de Access-Control-Allow-Origin para poder usar las fuentes web de mi subdominio en mi dominio principal?


Notas:

Encontrará ejemplos de este y otros encabezados para la mayoría de los servidores HTTP en los proyectos de Config de servidor HTML5BP https://github.com/h5bp/server-configs


133
2017-07-20 22:57


origen


finalmente encontré la ubicación de respuesta / {add_header Access-Control-Allow-Origin "*"; } - Chris McKee
ng4free.com/… - Jaydeep Gondaliya


Respuestas:


Nginx tiene que ser compilado con http://wiki.nginx.org/NginxHttpHeadersModule (por defecto en Ubuntu y algunas otras distribuciones de Linux). Entonces puedes hacer esto

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

157
2017-09-01 00:25



Siga estas instrucciones en caso de que desee implementar la misma solución en apache: stackoverflow.com/questions/11616306/… - camilo_u
Ese módulo parece estar compilado por defecto (al menos en Ubuntu). - Steve Bennett
También compilado por defecto en Amazon Linux Repo - Ross
¿En qué archivo y ubicación deberíamos poner esta directiva de ubicación? - Sumit Arora
No me funciona. Nginx 1.10.0, Ubuntu 16.04 - Omid Amraei


Una respuesta más actualizada:

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

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

También puede desear agregar Access-Control-Expose-Headers (en el mismo formato que Access-Control-Allow-Allow Headers) para exponer sus encabezados personalizados y / o "no simples" a las solicitudes 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/

Configuraciones para otros servidores web. http://enable-cors.org/server.html


29
2017-08-24 11:01



¿Alguna forma de no tener que repetir estas líneas para cada ubicación? ¿Podemos ponerlo bajo el bloque del servidor {}? - geoyws
@geoyws (sin el @ no recibí una notificación); Usted podría ponerlo por encima de la ubicación, eso está bien :) - Chris McKee
Falta acceso-control-exponer-encabezados aquí - chovy
@chovy es un encabezado opcional para exponer los valores no predeterminados a las solicitudes de ajax, pero puedo verlo haciendo tropezar a las personas tan debidamente agregadas. Ejército de reserva - Chris McKee
Por favor, evite usar if en nginx Incluso el manual oficial lo desalienta.. - aggregate1166877


En primer lugar, permítame decir que la respuesta de @hellvinz está funcionando para mí:

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

Sin embargo, he decidido responder a esta pregunta con una respuesta por separado, ya que solo conseguí que esta solución funcionara después de dedicar unas diez horas más a buscar una solución.

Parece que Nginx no define ningún tipo de fuente MIME (correcta) de forma predeterminada. Siguendolo este tutorial Encontré que podría agregar lo siguiente:

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 mi etc/nginx/mime.types expediente. Como se dijo, la solución anterior funcionó.


6
2018-01-04 15:24



Por lo general, señalo a las personas para que revisen el archivo de tipo mime en H5BP github.com/h5bp/server-configs-nginx/blob/master/mime.types :) - Chris McKee


Aquí está el artículo que escribí que evita parte de la duplicación para GET | POST. Debería ponerte en marcha con CORS en Nginx.

control de acceso nginx permite origen

Aquí está el fragmento de muestra de la publicación:

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

5
2018-04-17 21:15



De acuerdo con la política de SF, debe copiar la información en la publicación, no solo vincularla. Los sitios web pueden desaparecer en cualquier momento, lo que sería la pérdida de información. - Tim
Punto válido @tim, actualizado para incluir el código. - gansbrest


La directiva add_header tradicional de Nginx no funciona con respuestas 4xx. Como todavía queremos agregarles encabezados personalizados, necesitamos instalar el módulo ngx_headers_more para poder usar la directiva more_set_headers, que también funciona con respuestas 4xx.

sudo apt-get install nginx-extras

Entonces use more_set_headers en el archivo nginx.conf, he pegado mi muestra a continuación

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

2
2018-05-30 10:41





En mi caso, utilizando Rails 5, la única solución de trabajo ha sido agregar el rack-cors joya. Al igual que:

en / Gemfile

# Gemfile
gem 'rack-cors'

en 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

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


0
2018-05-04 23:07



¿Cómo ayuda nginx a servir archivos estáticos? - Walf
Estaba usando nginx como proxy inverso para servir a la aplicación rails 5. Este es un caso particular en el que la restricción CORS no provenía de nginx, sino de la aplicación Rails de origen que la respalda. - xyz