Nginx CORS 'Access-Control-Allow-Origin' 标头答案

【问题标题】：Nginx CORS 'Access-Control-Allow-Origin' headerNginx CORS 'Access-Control-Allow-Origin' 标头
【发布时间】：2018-09-19 16:57:30
【问题描述】：

我已经使用以下配置配置了 Nginx 反向代理：

location ^~ /api/my-service/ {
    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,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 200;
 }
 if ($request_method = 'GET') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Authorization, DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
 }
}

当从不同的来源调用此服务时，在网络选项卡中，我会看到服务的响应，例如： http://nginx-host/api/my-service/users/user 响应头是：

Cache-Control   no-cache, no-store, max-age=0, must-revalidate
Connection  keep-alive
Content-Type application/json;charset=UTF-8
Date    Tue, 10 Apr 2018 07:54:40 GMT
Expires 0
Pragma  no-cache
Server  nginx/1.10.3 (Ubuntu)
Transfer-Encoding chunked
X-Content-Type-Options nosniff
X-Frame-Options DENY
X-XSS-Protection 1; mode=block

在 chrome/firefox 的控制台中我看到：

Failed to load http://nginx-host/api/my-service/users/user: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://10.11.13.202:2200' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

这个调用是从基于反应的应用程序发出的，我是否应该在请求标头中添加一些东西才能通过它。 OPTIONS 响应的标题正确显示：

HTTP/1.1 204 No Content
Access-Control-Allow-Headers: Authorization,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range
Access-Control-Allow-Methods: GET, POST, OPTIONS, HEAD
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 1728000
Connection: keep-alive
Content-Length: 0
Content-Type: text/plain; charset=utf-8
Date: Tue, 10 Apr 2018 08:08:53 GMT
Server: nginx/1.10.3 (Ubuntu)

【问题讨论】：

您是否比这里更关注实际代码中的一致 URL？究竟是/api/my-service/，还是/api/user-service/？
ok 使它在问题中保持一致只是试图通用，因此在这里做了我的服务但是 chrome 日志被复制粘贴在这里
那个请求实际上是一个 GET 请求？（浏览器在此处创建的，而不是您在代码中所做的。）您正在添加一个标头，说明允许使用三种不同的方法，但您的节点设置只处理其中一种 - 为什么？
还有其他方法，比如 OPTIONS，我有一个配置也有返回。（if ($request_method = 'OPTIONS') {) 是的，这个特定的请求是一个 GET 请求，
这还是不一致，你说你在看网络标签中http://nginx-host/api/my-service/users/user的响应头，但是报错信息是关于http://10.21.12.116/api/my-service/users/user

标签： reactjs nginx cors

【解决方案1】：

暴露的 API 是厚颜无耻的，对于一个 GET 请求，响应头是 202 接受的，理想情况下应该是 200，在这种情况下 NGINX 不会附加响应头并弄乱配置。呵呵！

【讨论】：

【解决方案2】：

另一种方法是始终与 * 占位符一起使用，例如： add_header 'Access-Control-Allow-Origin' '*' 总是；有效！

【讨论】：