CORS 配置与授权和 angular

Question

我正在构建一个应用程序，其前端基于 angular，后端基于 yii2。 我暂时在框架内配置了 CORS

public function afterAction($action, $result)
    {
        \Yii::$app->response->headers->set('Access-Control-Allow-Methods', 'POST, GET, PUT, OPTIONS, HEAD, DELETE');
        \Yii::$app->response->headers->set('Access-Control-Allow-Headers', 'Authorization, Content-Type');
        \Yii::$app->response->headers->set('Access-Control-Allow-Origin', '*');
        return parent::afterAction($action, $result);
    }

此配置适用于不包括授权 header 的所有请求，POST 和 GET。 但是对于迄今为止具有授权的一个请求，它说

Access to fetch at 'http://docker.me.com/api/users/3eea14e9a1659e8e849c806d7eff5ad6.json' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我尝试将http://localhost:4200定义为我的 Allow-Origin 值，但结果仍然相同。

向我得到的同一点发出 curl 请求：

>curl "http://docker.me.com/api/users/3eea14e9a1659e8e849c806d7eff5ad6.json" -H "Authorization: Bearer 3eea14e9a1659e8e849c806d7eff5ad6" -H "Content-Type: application/json" -D -
HTTP/1.1 200 OK
Date: Sun, 17 May 2020 12:37:57 GMT
Server: Apache/2.4.41 (Unix)
X-Powered-By: PHP/7.4.5
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Vary: Accept
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, HEAD, DELETE
Access-Control-Allow-Headers: Authorization, Content-Type
Access-Control-Allow-Origin: *
X-Debug-Tag: 5ec1302552af4
X-Debug-Duration: 372
X-Debug-Link: /debug/default/view?tag=5ec1302552af4
Set-Cookie: PHPSESSID=oqss701mi72l7shjjb0veoqhtm; path=/; HttpOnly
Set-Cookie: _identity=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT; Max-Age=0; path=/; HttpOnly
Set-Cookie: _csrf=252702ff0a3553be04c75e84288b5839de461426ef2c4a13e8add9585ebac678a%3A2%3A%7Bi%3A0%3Bs%3A5%3A%22_csrf%22%3Bi%3A1%3Bs%3A32%3A%22FGsZMf8ArRw10nJtc3xxj8k1naxBxdFC%22%3B%7D; path=/; HttpOnly
Transfer-Encoding: chunked
Content-Type: application/json; charset=UTF-8

{"id":47,"email":"maniakalen2@gmail.com","name":"Test","surname":"Test","photo":"/assets/images/silhouette.gif","details":"","phone":"","user_type":"consumer"}

很明显，响应标头已设置。 我还尝试为那些想知道的人设置 Access-Control-Allow-Credentials。

我在这里的图片中缺少什么？

---

根据请求，我从网络选项卡添加屏幕截图

Answer 1

问题出在Access-Control-Allow-Origin: *中。 curl 不会失败，因为它不检查 CORS。

根据文档： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

对于没有凭据的请求，可以指定文字值“*”作为通配符； 该值告诉浏览器允许从任何来源请求代码来访问资源。 尝试将通配符与凭据一起使用将导致错误。

因此，您需要在此处放置一个真实的来源而不是* 。

如果使用localhost:4200进行本地开发，它将是

Access-Control-Allow-Origin: http://localhost:4200

为了一个产品

Access-Control-Allow-Origin: http://my-domain.com

最简单的方法是解析请求标头并在此处使用Host header，但仍然要尊重安全性 - 请验证它是您要允许的主机。

---

如果它仍然失败，这意味着有标题，或者使用了 HTTP 方法，但在Access-Control-Allow-Headers或Access-Control-Allow-Methods中没有指定，我会责怪Headers并仔细检查它是否真的允许所有必需的标题。