Angular:当凭据标志为真时，不能在“Access-Control-Allow-Origin"标头中使用通配符“*" [英] Angular: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true

问题描述

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

I know there are a lot of questions concerning CORS already but they don't seem to answer my question.

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

So I have a client app written in Angular which will be used to create a mobile app (with Apache Cordova). The html files and JavaScript files will be loaded from the mobile device. When I simulate that and I send requests to the REST API server I first got "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:82' is therefore not allowed access". So I added header("Access-Control-Allow-Origin: *"); in my php REST API Server. I cannot specify a specific domain as the requests will come from the mobile devices.

现在我得到了当凭据标志为真时，不能在‘Access-Control-Allow-Origin’标头中使用通配符‘*’."

Now I got to "A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true."

我终于找到了解决方案，但我不确定保持这种状态是否安全.

I finally found a solution but I'm not sure it is safe to keep it like this.

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

In my php REST API Server I added this:

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");
}

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

Please advise on this way of working. If it is not secure or no good at all, can you please tell me how to solve this issue?

非常感谢！

推荐答案

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

Response should only have the accepted headers in Access-Control-Allow-Headers, don't use wildcard.

就安全而言，请注意@Jules 在此关于 CORS 的帖子中的评论:

As far as it being safe, note the comment from @Jules in this post about CORS:

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

Note that sending the HTTP Origin value back as the allowed origin will allow anyone to send requests to you with cookies, thus potentially stealing a session from a user who logged into your site then viewed an attacker's page. You either want to send '*' (which will disallow cookies thus preventing session stealing) or the specific domains for which you want the site to work.

另请参见以下示例:

Access-Control-Allow-Headers 中不接受通配符

指定标头 Access-Control-Allow-Headers

替代方法

您可以将原始标题设置为:

You can just set the origin header to:

Access-Control-Allow-Origin: *

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

If you don't need to include cookies in your request remove:

Access-Control-Allow-Credentials: true

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

Remove the wildcard from Access-Control-Allow-Headers and add Authorization and then pass that header as part of your request for authorization, instead of passing credentials in a cookie, ex:

Authorization: Basic a2lkMT==

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

Also, add the OPTIONS to allowed methods.

这篇关于Angular:当凭据标志为真时，不能在“Access-Control-Allow-Origin"标头中使用通配符“*"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！