在 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

这一切都归结为 NGINX 使用了 more_set_headers 而不是 add_header（它可能一直是 NGINX 启用了此模块），然后使用上述示例之一使其工作。

Answer 3

您可能希望使用 curl 和 CORS 原始标头测试对 api.MYDOMAIN.com/v1/data/extraction 的调用。

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

响应应该带有标题：

访问控制允许来源：*

如果该标头没有随响应返回，chrome 将抛出与您看到的一样的错误。

附：错误中提到了 nginx 以 404 响应，这可能与它有关。

Answer 4

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