Angular：当凭证标志为真时，不能在“Access-Control-Allow-Origin”标头中使用通配符“*”

Question

我知道已经有很多关于 CORS 的问题，但他们似乎没有回答我的问题。

所以我有一个用 Angular 编写的客户端应用程序，它将用于创建一个移动应用程序（使用 Apache Cordova）。 html 文件和 JavaScript 文件将从移动设备加载。 当我模拟它并向我首先得到的 REST API 服务器发送请求时 “请求的资源上不存在'Access-Control-Allow-Origin'标头。因此不允许访问源'http://localhost:82'”。 所以我添加了 header("Access-Control-Allow-Origin: *");在我的 php REST API 服务器中。我无法指定特定域，因为请求将来自移动设备。

现在我得到“当凭据标志为真时，不能在 'Access-Control-Allow-Origin' 标头中使用通配符 '*'。”

我终于找到了解决方案，但我不确定这样保存是否安全。

在我的 php REST API 服务器中，我添加了这个：

if (isset($_SERVER['HTTP_ORIGIN'])) {
  header("Access-Control-Allow-Credentials: true");
  header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
  header("Access-Control-Allow-Headers: *, X-Requested-With, Content-Type");
  header("Access-Control-Allow-Methods: GET, POST, DELETE, PUT");
}

请就这种工作方式提出建议。如果它不安全或根本不好，请告诉我如何解决这个问题？

非常感谢！

Answer 1

响应应该只有 Access-Control-Allow-Headers 中接受的标头，不要使用通配符。

就安全而言，请注意@Jules 在此post about CORS 中的评论：

请注意，将 HTTP Origin 值作为允许的来源发回 将允许任何人 使用 cookie 向您发送请求，从而可能窃取用户的会话 谁登录了您的网站，然后查看了攻击者的页面。你要么想发送'*' （这将禁止 cookie 从而防止会话窃取）或特定域 您希望网站为其工作。

请参见以下示例：

Wildcard not accepted in Access-Control-Allow-Headers

Specify headers Access-Control-Allow-Headers

---

替代方法

您可以将原始标头设置为：

Access-Control-Allow-Origin: *

如果您不需要在请求中包含 cookie，请删除：

Access-Control-Allow-Credentials: true

从 Access-Control-Allow-Headers 中删除通配符并添加授权，然后将该标头作为授权请求的一部分传递，而不是在 cookie 中传递凭据，例如：

Authorization: Basic a2lkMT==

另外，将 OPTIONS 添加到允许的方法中。