CORS 错误，但 URL 中只有特殊字符答案

【问题标题】：CORS errors but only with special characters in URLCORS 错误，但 URL 中只有特殊字符
【发布时间】：2022-04-13 01:08:07
【问题描述】：

我的客户端 Web 应用程序是使用 Angular 编写的，而服务器端是 AWS API 网关。

我收到了错误：

Access to XMLHttpRequest at <my destiniation> from origin <my origin> has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

其中<my destination> 和<my origin> 不是同一个域。

问题是我确实有 CORS 设置来支持这一点。我的设置使用预检 OPTIONS 请求，然后是 PUT 请求（PUT 是失败的 403，控制台显示 CORS 错误）。 OPTIONS 请求的响应实际上包含access-control-allow-origin: *，最奇怪的是，我的 PUT 请求只有在我的一个（或多个）URL 参数参数中包含 %23 时才会失败（例如，由于URL 编码 # 符号）。

有谁知道为什么 URL 参数中的特殊字符会触发 CORS 错误，而没有特殊字符的完全相同的请求通过 CORS 没有任何问题？我会错过什么？

【问题讨论】：

当请求因请求URL中的%23而失败时，响应的HTTP状态码是什么？如果响应的状态码不是 200 OK，而是 4xx 或 5xx 错误响应，那么您实际上没有需要解决的 CORS 问题。相反，您需要解决 4xx 或 5xx 错误问题。
预检 OPTIONS 以 200 成功，但以下 PUT 以 403 失败。您认为这意味着 CORS 是红鲱鱼？
是的，如果你得到一个 403，那么 CORS 与原因的关系就是红鲱鱼。因此，无论是什么导致您遇到 403，都不是您的 CORS 配置。浏览器在您引用的错误消息中提到 CORS 的唯一原因是服务器没有将 Access-Control-Allow-Origin 标头添加到该 403 响应中。服务器上的 CORS 配置永远不会导致服务器拒绝请求——所有实际的 CORS 阻塞都是由客户端的浏览器完成的。 CORS 配置唯一会导致发生的事情是让服务器发送 Access-Control-Allow-* 标头。
谢谢！这帮助了很多。

标签： angular aws-api-gateway

【解决方案1】：

感谢sideshowbarker 的帮助，我得以解决这个问题。事实证明，CORS 错误实际上是一个红鲱鱼。

深入挖掘后，我了解到 AWS 签名不匹配（但仅在包含特殊字符时），我发现我需要对参数进行双重编码才能正确计算签名。我在每个可能包含特殊字符的参数上使用decodeURIComponent() 执行此操作，然后在生成的整个 URL 上使用decodeURI()（有效地对有问题的参数进行双重编码）。现在签名通过，请求成功。

这个问题/解决方案可能是我的客户端应用程序（在 Angular 中）如何使用 AWS 签名所独有的，但对于遇到类似错误的其他人来说，它可能会派上用场。

【讨论】：

伙计，你救了我半天的秃头。干杯。

【解决方案2】：

经过数小时检查同一问题后，发现它是 jrel 评论的红鲱鱼。在我的特殊情况下，问题出在我们的 nginx 服务器和机器上安装的 modsecurity + Owasp CRS 规则中。每次在 URL 中检测到查询字符串时，请求都会因可能的 XSS 攻击而被阻止。

【讨论】：

【解决方案3】：

这里也出现了类似的问题。然而，原因有些不同。只要在请求之前有预检请求，就会发生带有 403 状态的 CORS 错误。原因是在这种特殊情况下的 POST 请求只使用 url 参数。但是，使用的 Tomcat 服务器似乎期望 POST 请求的 Content-Type 标头已填充，但由于没有数据属性，客户端库已将其删除。由于我们可以确保此类请求始终包含 Content-Type 和至少一个空的“数据”：{}，因此不会出现 403 和 CORS 错误。但正如所说，这种效果只发生在浏览器发出预检请求时。也许它可以帮助某人；）

【讨论】：