如何在Nginx代理服务器中启用CORS？

Question

作为我的标题，这里是位于 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;
  }
}

nginx.conf文件保持默认不变。

在向api.localhost（api.localhost/admin/login）发送请求后，我仍然收到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.

- qwang07

---

你没有提到是否遇到了任何问题，如果有的话，问题是什么？ - Tarun Lalwani

@Tarun Lalwani 当我尝试向api.localhost发送请求时，我仍然收到405错误，我不知道为什么。 - qwang07

我尝试了<Tarun Lalwani>的评论，但是出现了以下错误：响应中“Access-Control-Allow-Credentials”头的值为“”，当请求的凭据模式为“include”时必须为“true”，直到我更改了这一行：add_header 'Access-Control-Allow_Credentials' 'true'; 为：add_header 'Access-Control-Allow-Credentials' 'true'; - Themistoklis Sgouridis

Answer 1

问题在于您的if条件不会将头信息发送到父级/。如果您检查预检响应头，它将是什么样子。

问题在于您的if条件不会将标题发送到位于/下的父级页面。如果您检查预检响应标题，则如下所示。

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

那样不会有任何作用。因此，针对您有两种可能的解决方案。将add_header复制到if块内。

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

或者你可以将其移到位置块之外，这样每个请求都有响应。

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

如果你想在配置中仅允许某些位置进行CORS，例如/api，那么你应该创建一个带有你的头信息的模板配置文件。

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

然后使用

include conf.d/corsheaders.conf;

在您的 OPTIONS 块和 /api 块中添加这些核心头信息。因此，CORS 仅允许在 /api 上使用。如果您不关心 CORS 的位置，则可以使用第二种方法将核心头信息移到服务器块中。

- Tarun Lalwani

---

502响应表示CORS问题已经解决，而新的错误是关于API服务器的吗？ - qwang07

问题已解决，这是答案，感谢您的帮助。 - qwang07

这个方法很好用，但是我发现有些请求没有CORS头部信息，因为应用程序的响应代码不在允许的范围内。根据Nginx文档的建议，在CORS行的末尾添加了“always”，问题迎刃而解。 - virtualadrian

作为一项说明，我需要知道服务器返回状态码时除了200以外的其它值。但是这对我来说并没有起作用，因为NGINX需要always参数才能在“不成功”的状态上添加头信息。根据文档：如果指定了always参数......，则无论响应代码如何，都将添加标题字段。因此，如果您正在寻找此行为，则解决方法是在CORS的add_header指令末尾加上always。 - Miguel Sánchez Villafán

这可能是我最初不得不添加两次的原因，因为返回了204并且我没有使用always。 - Tarun Lalwani