LocalStorage受到同源策略限制，是怎么实现单点登录的

淡淡的烟草味﹌ 2024-03-16 11:46 21阅读 0赞

LocalStorage 确实受到同源策略的限制，只能在同源的网页之间共享数据。但是，可以通过在单点登录系统中使用跨域资源共享（Cross-Origin Resource Sharing，CORS）机制来绕过同源策略的限制，从而实现单点登录。

CORS 是一种浏览器机制，它允许服务器在 HTTP 响应中添加一些头信息，告诉浏览器哪些域名是被允许访问本站资源的。通过在单点登录系统的服务器上添加正确的 CORS 头信息，可以让其他系统的网页在跨域访问单点登录系统时能够读取 LocalStorage 中的 token 值，从而实现单点登录。

以下是一个简单的跨域单点登录示例：

1.  用户在系统 A 中进行登录，系统 A 生成一个 token 值，并将其存储在 LocalStorage 中。
2.  用户在访问系统 B 时，系统 B 需要检查用户是否已经登录。为了实现单点登录，系统 B 发送一个 HTTP 请求到单点登录系统的服务器，并在请求头中添加 Origin 字段，用于告知单点登录系统请求的来源。
3.  单点登录系统的服务器接收到请求后，检查 Origin 字段的值是否在允许访问的域名列表中。如果允许访问，则在 HTTP 响应头中添加 Access-Control-Allow-Origin 字段，并设置为请求的 Origin 值，表示允许该域名访问本站资源。
4.  然后，在 HTTP 响应头中添加 Access-Control-Allow-Credentials 字段，并设置为 true，表示允许在跨域请求中发送和接收 cookie，这样可以保证系统 B 中的浏览器能够读取 LocalStorage 中的 token 值。
5.  系统 B 收到响应后，可以在 JavaScript 代码中读取 LocalStorage 中的 token 值，并将其发送到服务器进行校验。

需要注意的是，为了保证安全性，单点登录系统需要对跨域请求进行严格的校验和控制，以防止 CSRF（Cross-Site Request Forgery，跨站请求伪造）等攻击。另外，在使用 CORS 机制进行跨域访问时，应该仅允许来自特定域名的请求，并且在响应头中添加恰当的 CORS 字段，以保护系统的安全性。

总之，虽然 LocalStorage 受到同源策略的限制，但是通过使用 CORS 机制，可以实现在跨域网页之间共享 LocalStorage 中的数据，从而实现单点登录的功能。