☰

我是否在错误的地方实现了 CORS？

tag-icon • tag-icon nginx cors
我是否在错误的地方实现了 CORS？

我遇到了与 CORS 相关的问题。我总是被客户端 API 拒绝（文章末尾的控制台错误）。现在我想知道这是否是我的错。我希望在您的帮助下找到漏洞。

我得到了以下设置：

我的职责是： domain-a.com: NGINX ------ ANGULAR 前端 ------ SpringBoot 后端

在客户责任中： 域名-b.com: /adrstep.json

domain-b.com 在 /adrstep.json 上调用 GET 时提供 JSON。直接从浏览器调用时，此方法运行良好。

在角度部分，我调用 domain-a.com/adrstep/adrstep.json，它在 NGINX 中被重写为 domain-b.com/adrstep.json。这是我在 Chrome 中得到的结果：

从 CHROME 网络选项卡：

从浏览器向 NGINX 发出请求：

GENERAL:
Request URL: https://domain-a.com/adrsteps/adrstep.json
Request Method: GET
Status Code: 302 Moved Temporarily
Remote Address: 212.25.3.166:443
Referrer Policy: no-referrer-when-downgrade

RESPONSE HEADER:
HTTP/1.1 302 Moved Temporarily
Server: nginx
Content-Type: text/html
Connection: keep-alive
Location: https://domain-b.com
Access-Control-Allow-Origin: https://domain-b.com
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Headers: Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With

REQUEST HEADER:
GET /adrsteps/adrstep.json HTTP/1.1
Host: domain-a.com
Connection: keep-alive
Accept: application/json, text/plain, */*
Content-Type: application/json
Referer: https://domain-a.com
Accept-Encoding: gzip, deflate, br

将请求从 NGINX 重定向到 domain-b.com 上的 api：

GENERAL
Request URL: https://domain-b.com/adrstep.json
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: 193.246.69.8:443
Referrer Policy: no-referrer-when-downgrade

RESPONSE HEADER
HTTP/1.1 200 OK
Content-Type: text/plain
Content-Length: 0
Connection: keep-alive
Status: 200 OK
Age: 0
Strict-Transport-Security: max-age=86400; includeSubdomains
X-Frame-Options: SAMEORIGIN
Frame-Options: SAMEORIGIN

REQUEST HEADER
OPTIONS /adrstep.json HTTP/1.1
Host: domain-b.com
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: https://domain-a.com
Access-Control-Request-Headers: authorization,content-type,x-requested-with
Accept: */*
Accept-Encoding: gzip, deflate, br

NGINX 配置：

location /adrsteps/ {
    add_header 'Access-Control-Allow-Origin' 'https://domain-b.com' always;
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,...
    rewrite ^(\/adrsteps\/) https://domain-b.com/adrsteps.json$2 break;
    proxy_redirect     off;
}

浏览器控制台错误：

Failed to load https://domain-b.com/adrsteps.json?: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://domain-a.com' is therefore not allowed access.

有人知道问题可能出在哪里吗？我可以Access-Control-Allow-Origin在我的请求标头中清楚地看到...提前致谢。

答案1

https://domain-a.com您应该在 vhost 配置中允许 Origin ，domain-b.com因为浏览器会检查是否https://domain-a.com允许共享网站上托管的资源https://domain-b.com。

这个链接可能对你有一点帮助：https://upload.wikimedia.org/wikipedia/commons/c/ca/Flowchart_showing_Simple_and_Preflight_XHR.svg

我希望这个能帮上忙！

答案2

感谢@Craft 发布的图表，我找到了正确的方向。但解决方案不在客户端——这是一个 nginx 配置错误。最后我不得不rewrite 和 proxypass请求。我错过了后者。

这是我的 nginx 位置块：

location /adrsteps/ {
    rewrite ^(\/adrsteps\/) /adrsteps.json$2 break;
    proxy_pass https://domain-b.com;
    proxy_redirect off;

    add_header 'Access-Control-Allow-Origin' 'https://domain-b.com' always;
    add_header 'Access-Control-Allow-Methods' 'GET, 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;
  }

顺便说一句：如何区分 CORS 是否在您或客户端正确实施，只需使用 CORS-Toggle。如果它与切换一起使用（它添加了 Access-Control-Allowed-Origin = '')，错误就由你来承担。*

相关内容