Frage Wie füge ich Access-Control-Allow-Origin in NGINX hinzu?


Wie stelle ich den Access-Control-Allow-Origin-Header so ein, dass ich Web-Fonts aus meiner Subdomain in meiner Hauptdomain verwenden kann?


Anmerkungen:

Sie finden Beispiele für diesen und andere Header für die meisten HTTP-Server in den HTML5BP Server-Konfigurationsprojekten https://github.com/h5bp/server-configs


133
2017-07-20 22:57


Ursprung


ah hat endlich die Antwort location / {add_header Access-Control-Allow-Origin "*" gefunden; } - Chris McKee
ng4free.com/... - Jaydeep Gondaliya


Antworten:


Nginx muss mit kompiliert werden http://wiki.nginx.org/NginxHttpHeadersModule (Standard unter Ubuntu und einigen anderen Linux-Distributionen). Dann kannst du das tun

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

157
2017-09-01 00:25



Befolgen Sie diese Anweisungen, wenn Sie die gleiche Lösung auf Apache implementieren möchten: stackoverflow.com/questions/11616306/ ... - camilo_u
Dieses Modul scheint standardmäßig kompiliert zu sein (zumindest unter Ubuntu). - Steve Bennett
auch standardmäßig auf Amazon Linux Repo kompiliert - Ross
In welcher Datei und an welchem ​​Ort sollten wir diese Location-Direktive platzieren? - Sumit Arora
Es funktioniert nicht für mich. Nginx 1.10.0, Ubuntu 16.04 - Omid Amraei


Eine aktuellere Antwort:

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

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

Vielleicht möchten Sie auch hinzufügen Access-Control-Expose-Headers (im selben Format wie Access-Control-Allow-Header), um Ihre benutzerdefinierten und / oder "nicht-einfachen" Header für Ajax-Anfragen verfügbar zu machen.

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/de/tutorials/cors/

Konfigurationen für andere Webserver http://enable-cors.org/server.html


29
2017-08-24 11:01



Irgendeine Möglichkeit, diese Zeilen nicht für jeden Ort wiederholen zu müssen? Können wir es unter den Serverblock {} setzen? - geoyws
@geoyws (ohne @ Ich habe keine Benachrichtigung bekommen); Du könntest es über den Ort stellen, das ist in Ordnung :) - Chris McKee
access-control-expose-headers fehlt hier - chovy
@chovy ist ein optionaler Header, um nicht standardmäßige Ajax-Anfragen anzuzeigen, aber ich kann sehen, dass Leute so richtig aufgestöbert werden. Ta - Chris McKee
Bitte vermeide es zu benutzen if in nginx - sogar das offizielle Handbuch entmutigt es. - aggregate1166877


Erstens, lassen Sie mich sagen, dass @hellvinz Antwort für mich arbeitet:

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

Ich habe mich jedoch entschlossen, diese Frage mit einer separaten Antwort zu beantworten, da ich es nur geschafft habe, diese Lösung zu nutzen, nachdem ich nach weiteren zehn Stunden nach einer Lösung gesucht hatte.

Es scheint, dass Nginx standardmäßig keine (korrekten) MIME-Typen für Schriften definiert. Folgend dieses tuorial Ich fand, ich könnte folgendes hinzufügen:

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

Zu meinem etc/nginx/mime.types Datei. Wie erwähnt, funktionierte die obige Lösung dann.


6
2018-01-04 15:24



Ich würde Leute normalerweise dazu bringen, die MIME-Typ-Datei auf H5BP zu überprüfen github.com/h5bp/server-configs-nginx/blob/master/mime.types :) - Chris McKee


Hier ist der Artikel, den ich geschrieben habe, der einige der Duplizierung für GET | POST vermeidet. Es sollte dich mit CORS in Nginx gehen.

nginx access control erlaubt den Ursprung

Hier ist das Beispiel-Snippet von der Post:

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



Gemäß der SF-Richtlinie müssen Sie die Informationen in den Post kopieren und nicht nur darauf verlinken. Websites können jederzeit verschwinden, was zu einem Informationsverlust führen würde. - Tim
Gültiger Punkt @tim, aktualisiert, um den Code aufzunehmen - gansbrest


Die traditionelle add_header-Direktive von Nginx funktioniert nicht mit 4xx-Antworten. Da wir ihnen immer noch benutzerdefinierte Header hinzufügen möchten, müssen wir das Modul ngx_headers_more installieren, um die Anweisung more_set_headers verwenden zu können, die auch mit 4xx-Antworten funktioniert.

sudo apt-get install nginx-extras

Dann benutze more_set_headers In der Datei nginx.conf habe ich mein Beispiel eingefügt

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





In meinem Fall, mit Rails 5, wurde die einzige funktionierende Lösung hinzugefügt rack-cors Juwel. Wie 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

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


0
2018-05-04 23:07



Wie hilft das Nginx statische Dateien zu dienen? - Walf
Ich benutzte Nginx als Reverse Proxy, um die Rails 5 App zu bedienen. Dies ist ein spezieller Fall, in dem die CORS-Einschränkung nicht von nginx kam, sondern von der Ursprungs-Rails-App dahinter. - xyz