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


158

Wie setze ich den Access-Control-Allow-Origin-Header, damit ich Web-Fonts aus meiner Subdomain in meiner Hauptdomain verwenden kann?


Anmerkungen:

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


4
ah fand endlich die Antwort location / {add_header Access-Control-Allow-Origin "*"; }
Chris McKee

Antworten:


183

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

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

Befolgen Sie diese Anweisungen, falls Sie dieselbe Lösung auf Apache implementieren
möchten

6
Dieses Modul scheint standardmäßig kompiliert zu sein (zumindest unter Ubuntu).
Steve Bennett

1
Ebenfalls standardmäßig auf Amazon Linux Repo kompiliert
Ross

1
In welcher Datei und an welchem ​​Ort sollen wir diese Location-Direktive ablegen?
Sumit Arora

1
Das funktioniert bei mir nicht. Nginx 1.10.0, Ubuntu 16.04
Omid Amraei

36

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

Möglicherweise möchten Sie auch Access-Control-Expose-Headers(im selben Format wie Access-Control-Allow-Headers) hinzufügen , um Ihre benutzerdefinierten und / oder "nicht einfachen" Header Ajax-Anforderungen auszusetzen.

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


1
Wie kann es sein, dass diese Zeilen nicht für jeden Standort wiederholt werden müssen? Können wir es unter den Server-Block {} stellen?
Geoyws

@geoyws (ohne das @ habe ich keine Benachrichtigung bekommen); Sie könnten es über den Standort bringen, das ist in Ordnung :)
Chris McKee

Access-Control-Expose-Header fehlt hier
chovy

3
Bitte vermeiden Sie die Verwendung ifin Nginx - auch das offizielle Handbuch rät davon ab .
aggregate1166877

1
Ich möchte hinzufügen, dass es nützlich ist always, allen Optionen eine Option hinzuzufügen , add_headerdamit Header auch für Nicht-200-Antworten hinzugefügt werden. Seit nginx 1.7.5: nginx.org/en/docs/http/ngx_http_headers_module.html
Mitar

11

Hier ist der Artikel, den ich geschrieben habe, in dem Duplikate für GET | POST vermieden werden. Es sollte Sie mit CORS in Nginx in Schwung bringen.

Nginx-Zugriffskontrolle erlauben Herkunft

Hier ist das Beispiel aus dem Beitrag:

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
Gemäß der SF-Richtlinie müssen Sie die Informationen in den Beitrag kopieren und nicht nur mit ihm verknüpfen. Websites können jederzeit verschwinden, was einen Informationsverlust zur Folge hätte.
Tim

1
Gültiger Punkt @tim, aktualisiert um den Code
gansbrest

Erwägen Sie die Verwendung des Statuscodes, 204 No contentda dies angemessener erscheint.
Slava Fomin II

7

Lassen Sie mich zunächst sagen, dass die Antwort von @hellvinz für mich funktioniert:

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 diese Lösung erst dann zum Laufen gebracht habe, nachdem ich nach einer Lösung gesucht hatte.

Es scheint, dass Nginx standardmäßig keine (korrekten) Schriftart-MIME-Typen definiert. Durch Anschluss an diese tuorial fand ich mich folgende hinzufügen könnte:

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 meiner etc/nginx/mime.typesAkte. Wie gesagt, hat die obige Lösung dann funktioniert.


2
Ich würde in der Regel Menschen weist die MIME - Typ - Datei zu überprüfen auf H5BP github.com/h5bp/server-configs-nginx/blob/master/mime.types :)
Chris McKee

4

Die traditionelle add_header-Direktive von Nginx funktioniert nicht mit 4xx-Antworten. Da wir ihnen weiterhin 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, ich habe mein Beispiel unten 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;
    }
}

1

In einigen Fällen müssen Sie add_headerAnweisungen mit verwenden always, um alle HTTP-Antwortcodes abzudecken .

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

Aus der Dokumentation :

Wenn der Parameter always angegeben ist (1.7.5), wird das Header-Feld unabhängig vom Antwortcode hinzugefügt.

Fügt das angegebene Feld einem Antwortheader hinzu, sofern der Antwortcode 200, 201 (1.3.10), 204, 206, 301, 302, 303, 304, 307 (1.1.16, 1.0.13) oder 308 (1.13) entspricht .0). Parameterwert kann Variablen enthalten.


0

In meinem Fall, mit Rails 5, war die einzige funktionierende Lösung das Hinzufügen des rack-corsEdelsteins. 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


Wie hilft nginx dabei, statische Dateien bereitzustellen?
Walf

Ich habe Nginx als Reverse-Proxy für die Rails 5-App verwendet. Dies ist ein besonderer Fall, in dem die CORS-Einschränkung nicht von nginx, sondern von der dahinter stehenden origin Rails-App stammt.
user9869932
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.