Comment ajouter Access-Control-Allow-Origin dans NGINX ?

Cors joker

Une réponse plus actuelle :

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

Vous pouvez également ajouter Access-Control-Expose-Headers (dans le même format que Access-Control-Allow-Headers) afin d'exposer vos en-têtes personnalisés et/ou "non-simples" aux requêtes 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/

Configs pour d'autres serveurs web http://enable-cors.org/server.html

Contrôle d'accès - Autoriser les justificatifs d'identité

Si vous utilisez Access-Control-Allow-Credentials avec votre requête CORS, vous voudrez que le câblage de l'en-tête cors dans votre emplacement ressemble à ceci. Comme l'origine doit correspondre au domaine du client, les caractères génériques ne fonctionnent pas.

        if ($http_origin = ''){
            set $http_origin "*";
        }

        proxy_hide_header Access-Control-Allow-Origin;
        add_header Access-Control-Allow-Origin $http_origin;

Voici l'article que j'ai écrit et qui évite une partie de la duplication pour GET|POST. Il devrait vous permettre de commencer à utiliser CORS dans Nginx.

contrôle d'accès nginx allow origin

Voici l'extrait de l'article :

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

Dans certains cas, vous devez utiliser add_header avec des directives always pour couvrir todo Codes de réponse HTTP.

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

De documentation :

Si le paramètre always est spécifié (1.7.5), le champ d'en-tête sera ajouté quel que soit le code de réponse.

Ajoute le champ spécifié à un en-tête de réponse à condition que le code de réponse soit égal à 200, 201 (1.3.10), 204, 206, 301, 302, 303, 304, 307 (1.1.16, 1.0.13) ou 308 (1.13.0). La valeur du paramètre peut contenir des variables.

Tout d'abord, permettez-moi de dire que la réponse de @hellvinz fonctionne pour moi :

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

Cependant, j'ai décidé de répondre à cette question dans une réponse séparée, car je n'ai réussi à faire fonctionner cette solution qu'après avoir passé une dizaine d'heures supplémentaires à chercher une solution.

Il semble que Nginx ne définisse aucun type MIME de police (correct) par défaut. En suivant ce tuteur J'ai découvert que je pouvais ajouter ce qui suit :

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

A mon etc/nginx/mime.types dossier. Comme indiqué, la solution ci-dessus a alors fonctionné.