跨域匿名和使用凭证有啥区别

Posted 2023-02-27

【中文标题】跨域匿名和使用凭证有啥区别

【英文标题】：What's difference between crossorigin anonymous and use-credentials跨域匿名和使用凭证有什么区别

【发布时间】：2018-05-02 21:41:33

【问题描述】：

来自 MDN

匿名

执行跨域请求（即，带有 Origin: HTTP 标头）。但是没有发送凭证（即没有发送 cookie、没有 X.509 证书，也没有发送 HTTP 基本身份验证）。如果服务器没有向源站点提供凭据（通过不设置 Access-Control-Allow-Origin: HTTP 标头），图像将被污染并限制其使用。

使用凭证

发送使用凭据执行的跨域请求（即，使用 Origin: HTTP 标头）（即执行 cookie、证书和 HTTP 基本身份验证）。如果服务器没有向源站提供凭据（通过 Access-Control-Allow-Credentials: HTTP 标头），图像将被污染并限制其使用。

但是，它们之间的使用区别是什么。

【参考方案1】：

anonymous 和use-credentials 是属性值，它们分别转换为使用same-origin 和include 请求资源。

当请求资源而不指定crossorigin 属性（即省略）时，您将进行无CORS 提取。这应该用于不受 CORS 保护的资源。

当使用crossorigin="anonymous"（或crossorigin=""，因为这是默认值）请求资源时，您将其切换为 CORS 请求。这意味着如果响应标头包含，则受 CORS 保护的资源（例如：fetch()）将被发送到浏览器

Access-Control-Allow-Origin: *

请注意，我们使用的是* 通配符，但这也可能是特定的来源。

Access-Control-Allow-Origin: https://example.com

当使用 crossorigin="use-credentials" 请求资源时，您正在请求受 CORS 保护的资源，并且还可能包含私人数据，例如您的银行信息（例如：fetch("https://bank.com/my-transaction-history/")）。在这种情况下，响应头应包括：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://example.com
Vary: Cookie, Origin

接收请求的服务器将有权访问 cookie、Authorization 标头、客户端证书以对用户进行身份验证，还可以在使用 Set-Cookie 发出请求的浏览器上设置 cookie

阅读更多：https://jakearchibald.com/2021/cors/

【参考方案2】：

不同之处在于为来自该元素的请求发送凭据。服务器可能需要凭据才能批准请求。