为啥在 CORS/跨域场景下基于 token 的认证优于基于 cookie 的认证？

Posted 2023-03-10

【中文标题】为啥在 CORS/跨域场景下基于 token 的认证优于基于 cookie 的认证？

【英文标题】：Why token-based authentication is better than cookie-based authentication in CORS/Cross-domain scenario?为什么在 CORS/跨域场景下基于 token 的认证优于基于 cookie 的认证？

【发布时间】：2016-04-11 13:13:38

【问题描述】：

我已经看到 in many placestoken-based authentication 优于 cookie-based authentication 的好处之一是它更适合 CORS/跨域场景。

但是为什么呢？

这里是a CORS scenario：

从http://domain-a.com 提供的html 页面生成<img> src 请求http://domain-b.com/image.jpg。

即使我的机器上有一个令牌，仅仅<img> 标签怎么会知道在哪里找到并发送它？

根据here，建议将JWT存储为cookie，那么如何在CORS/跨域场景下生存？

添加 1 个

基于令牌的身份验证比会话cookie 更容易扩展。在此处查看相关主题：Stateless web application, an urban legend?

【参考方案1】：

只是为了澄清：对您拥有的任何子域的请求也被视为跨源请求（例如，您从 www.example.com 向 api.example.com 发出请求）。

一个简单的<img> GET 请求到另一个源确实也是跨源请求，但是如果您仅使用 GET、HEAD、POST 请求和您的 Content-Type 标头，浏览器不会使用预检 (OPTION) 请求是下列之一：

application/x-www-form-urlencoded 多部分/表单数据 文本/纯文本

因此，对另一个来源的简单<img> 请求不会有问题（无论是子域还是完全另一个域），因为它不会通过预检，除非它需要凭据，因为当您添加授权标头时，请求需要经过预检。

关于存储在localstorage vs in cookie：Localstorage 具有单一来源策略，这意味着您无法访问您从子域存储的数据，即example.com 无法访问api.example.com 的localstorage 中的数据。另一方面，使用 cookie，您可以定义哪些子域可以访问 cookie。因此，您可以访问存储在 cookie 中的令牌，并将其与您的请求一起发送到服务器。 Cookies 也不允许跨域访问数据。

希望这会有所帮助。