使用 Chrome 扩展解决 CORS 问题

Question

我的应用程序可在 app-123.company.aws.com 上使用，因此为了加快开发过程，我使用 Requestly 将脚本和 API 重定向到我的本地开发。这在大多数情况下工作正常，但某些 API 端点没有启用 CORS，因此在某些工作流程中我收到 CORS 错误。 我尝试像这样在 Requestly 中添加修改标头规则

但是我收到以下错误

对预检请求的响应未通过访问控制检查：当请求的凭据模式为“include”时，响应中“Access-Control-Allow-Origin”标头的值不能是通配符“*”

我该如何解决这个问题？

Answer 1

尝试添加您的位置指令

if ($http_origin ~* "^https?://app-123/.company/.aws/.com$") {
    add_header Access-Control-Allow-Origin $http_origin;
}

Answer 2

正如错误指出的那样，当请求的凭据模式为

*

时，您不能使用

include

作为 Access-Control-Allow-Origin 标头的值。

当请求的凭据模式为

include

时，它仅意味着请求携带 cookie 或授权标头。出于安全原因，服务器必须返回准确的原点，而不是

*

作为

Access-Control-Allow-Origin

的值。 参考这个SO答案

要解决此错误，您可以像这样简单地配置修改标头规则

Access-Control-Allow-Origin: https://app-123.company.aws.com

通过查看您的设置，我假设您的 appId 可以更改，因此以防万一，您的来源可能会更改。 Requestly 可以使用预定义函数

rq_request_initiator_origin()

自动为您计算页面原点。 请参阅此 GitHub 问题

Access-Control-Allow-Origin: rq_request_initiator_origin()

在运行时，您将根据请求的来源获得响应标头 A

ccess-Control-Allow-Origin

因此，如果页面来源是

https://app-123.company.aws.com

，它将是标头的值。