在 nginx 上启用 CORS

Question

我按照 this 示例在我的 API 子域上启用了 CORS，这样我就可以从 SwaggerUI 向它发送请求。这是我从该子域上的运行 OPTIONS 获得的输出：

curl -i -X OPTIONS http://api.MYDOMAIN.com/v1/data/extraction

HTTP/1.1 204 No Content
Server: nginx/1.10.3 (Ubuntu)
Date: Wed, 18 Apr 2018 20:45:52 GMT
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,X-API-Key
Access-Control-Max-Age: 1728000
Content-Type: text/plain charset=UTF-8
Content-Length: 0

我不知道该去哪里弄清楚为什么在我的文档子域（同一个 DOMAIN.com 服务器）的 Chrome 中它仍然给我这个。谁能告诉我应该去哪里看？

Answer 1

我遇到了类似的问题，无法正常工作。这个设置终于对我有用了。 https://gist.github.com/Stanback/7145487 这就是它的样子。我只是设置 $cors 'true' 来测试它是否有效。它对我有用。这都在 /location {...} 区域

set $cors '';
    if ($http_origin ~ '^https?://(localhost|www\.yourdomain\.com|www\.yourotherdomain\.com)') {
            set $cors 'true';
    }

    if ($cors = 'true') {
            add_header 'Access-Control-Allow-Origin' "$http_origin" always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
            # required to be able to read Authorization header in frontend
            #add_header 'Access-Control-Expose-Headers' 'Authorization' always;
    }

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
            # required to be able to read Authorization header in frontend
            #add_header 'Access-Control-Expose-Headers' 'Authorization' always;
            # 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;
    }

Answer 2

您可能想要使用 curl 和 CORS 来源 header.

测试对 api.MYDOMAIN.com/v1/data/extraction 的调用

curl -i -X POST -H "Origin: http://docs.whatever.com" \
 --verbose http://api.MYDOMAIN.com/v1/data/extraction

响应应该返回 header:

Access-Control-Allow-Origin: *

如果 header 没有返回响应，chrome 将抛出一个错误，如您所见。

P.S。报错中提到nginx返回404，可能与此有关

Answer 3

问题很可能是 Access-Control-Allow-Origin: * 和 Access-Control-Allow-Credentials: true 不兼容 - 如果您想传递凭据，则需要使用 Access-Control-Allow-Origin: {value-of-Origin-request-header} 和 Access-Control-Allow-Credentials: true.

Answer 4

所有这一切都归结为 NGINX 使用 more_set_headers 而不是 add_header（可能是 NGINX 启用了这个模块）然后使用上面的示例之一使其工作。

在 nginx 上启用 CORS

Enabling CORS on nginx

nginx

cors

swagger-ui