CORS 错误，但仅限于 URL 中存在特殊字符

Question

我的客户端 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: *23，最奇怪的是，只有当我的一个（或多个）URL 参数参数中包含 %23 时，我的 PUT 请求才会失败（例如，作为 URL 编码的结果） ＃ 象征）。

有谁知道为什么 URL 参数中的特殊字符会触发 CORS 错误，而没有特殊字符的完全相同的请求则可以毫无问题地传递 CORS？我可能会错过什么？

Answer 1

感谢sideshowbarker的帮助，我能够解决这个问题。事实证明，CORS 错误实际上是一个转移注意力的错误。

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

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