node.js - produccion - ¿Cómo habilitar CORS en el servidor proxy Nginx?

node js production server

Question

Como mi título, aquí está el archivo de configuración ubicado en conf.d / api-server.conf

server {
  listen 80;
  server_name api.localhost;

  location / {
    add_header ''Access-Control-Allow-Origin'' ''http://api.localhost'';
    add_header ''Access-Control-Allow_Credentials'' ''true'';
    add_header ''Access-Control-Allow-Headers'' ''Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range'';
    add_header ''Access-Control-Allow-Methods'' ''GET,POST,OPTIONS,PUT,DELETE,PATCH'';

    if ($request_method = ''OPTIONS'') {
      add_header ''Access-Control-Max-Age'' 1728000;
      add_header ''Content-Type'' ''text/plain charset=UTF-8'';
      add_header ''Content-Length'' 0;
      return 204;
    }

    proxy_redirect off;
    proxy_set_header host $host;
    proxy_set_header X-real-ip $remote_addr;
    proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:3000;
  }
}

El archivo nginx.conf permanece igual que el predeterminado.

Después de enviar la solicitud a api.localhost (api.localhost / admin / login), sigo recibiendo el error 405:

XMLHttpRequest cannot load http://api.localhost/admin/login. Response 
to preflight request doesn''t pass access control check: No ''Access-
Control-Allow-Origin'' header is present on the requested resource. 
Origin ''http://admin.localhost:3000'' is therefore not allowed access. 
The response had HTTP status code 405.

Answer 1

El problema es que su condición if no va a enviar los encabezados en el padre en / . Si comprueba los encabezados de respuesta de verificación previa sería

HTTP/1.1 204 No Content
Server: nginx/1.13.3
Date: Fri, 01 Sep 2017 05:24:04 GMT
Connection: keep-alive
Access-Control-Max-Age: 1728000
Content-Type: text/plain charset=UTF-8
Content-Length: 0

Y eso no da nada. Entonces dos posibles soluciones para ti. Copie el add_header dentro si el bloqueo también

server {
  listen 80;
  server_name api.localhost;

  location / {
    add_header ''Access-Control-Allow-Origin'' ''http://api.localhost'';
    add_header ''Access-Control-Allow_Credentials'' ''true'';
    add_header ''Access-Control-Allow-Headers'' ''Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range'';
    add_header ''Access-Control-Allow-Methods'' ''GET,POST,OPTIONS,PUT,DELETE,PATCH'';

    if ($request_method = ''OPTIONS'') {
      add_header ''Access-Control-Allow-Origin'' ''http://api.localhost'';
      add_header ''Access-Control-Allow_Credentials'' ''true'';
      add_header ''Access-Control-Allow-Headers'' ''Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range'';
      add_header ''Access-Control-Allow-Methods'' ''GET,POST,OPTIONS,PUT,DELETE,PATCH'';
      add_header ''Access-Control-Max-Age'' 1728000;
      add_header ''Content-Type'' ''text/plain charset=UTF-8'';
      add_header ''Content-Length'' 0;
      return 204;
    }

    proxy_redirect off;
    proxy_set_header host $host;
    proxy_set_header X-real-ip $remote_addr;
    proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:3000;
  }
}

O puede moverlo fuera del bloque de ubicación, por lo que cada solicitud tiene la respuesta

server {
   listen 80;
   server_name api.localhost;

 add_header ''Access-Control-Allow-Origin'' ''http://api.localhost'';
 add_header ''Access-Control-Allow_Credentials'' ''true'';
 add_header ''Access-Control-Allow-Headers'' ''Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range'';
 add_header ''Access-Control-Allow-Methods'' ''GET,POST,OPTIONS,PUT,DELETE,PATCH'';

  location / {

    if ($request_method = ''OPTIONS'') {
      add_header ''Access-Control-Max-Age'' 1728000;
      add_header ''Content-Type'' ''text/plain charset=UTF-8'';
      add_header ''Content-Length'' 0;
      return 204;
    }

    proxy_redirect off;
    proxy_set_header host $host;
    proxy_set_header X-real-ip $remote_addr;
    proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:3000;
  }
}

Si solo quieres permitir ciertas ubicaciones en tu configuración para CORS. como /api entonces deberías crear una plantilla conf con tus encabezados

 add_header ''Access-Control-Allow-Origin'' ''http://api.localhost'';
 add_header ''Access-Control-Allow_Credentials'' ''true'';
 add_header ''Access-Control-Allow-Headers'' ''Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range'';
 add_header ''Access-Control-Allow-Methods'' ''GET,POST,OPTIONS,PUT,DELETE,PATCH'';

y luego usa

include conf.d/corsheaders.conf;

en tu bloque de OPTIONS y bloque /api . Entonces CORS solo está permitido para /api . Si no le importa qué ubicación para CORS, puede utilizar el segundo enfoque de mover los encabezados de núcleo al bloque de servidor