js 跨域 cookie

一、基础概念

1. 跨域
   • 在Web开发中，由于浏览器的同源策略（Same - Origin Policy），不同源（协议、域名、端口至少有一个不同）的网页之间会存在限制交互的情况。例如，http://example.com和https://example.com（协议不同）、http://example.com和http://sub.example.com（域名不同）、http://example.com:80和http://example.com:8080（端口不同）都被视为不同源。

• Cookie
  • Cookie是一种存储在用户浏览器中的小型数据片段，它可以包含一些信息，如用户登录状态、偏好设置等。服务器可以通过HTTP响应头中的Set - Cookie字段发送Cookie给浏览器，浏览器会在后续对该域名的请求中通过Cookie请求头将相关的Cookie发送回服务器。

二、跨域Cookie的限制

1. 同源策略限制
   • 当进行跨域请求时，浏览器默认不会将Cookie发送到目标服务器，这是为了保护用户隐私和安全。例如，http://a.com向http://b.com发送AJAX请求时，如果b.com没有特殊设置，a.com设置的Cookie不会被发送到b.com。

• 安全风险考虑
  • 如果允许跨域Cookie随意发送，可能会导致用户的敏感信息泄露或者被恶意网站利用。例如，恶意网站可以利用跨域Cookie来模拟用户在其他合法网站的登录状态，从而进行未经授权的操作。

三、相关类型（从设置角度）

1. 会话Cookie（Session Cookie）
   • 不设置过期时间，浏览器关闭后自动删除。通常用于临时保存用户的登录状态等信息，在跨域场景下同样受同源策略限制。

• 持久Cookie（Persistent Cookie）
  • 设置了过期时间，在过期之前一直存在于浏览器中。跨域时也遵循同源策略的限制。

四、应用场景

1. 单点登录（SSO）
   • 在多个不同子域或者相关域之间共享登录状态时可能会涉及跨域Cookie的问题。例如，一个大型企业有多个子网站，如service1.company.com和service2.company.com，希望用户在登录其中一个网站后，在其他相关网站也能自动登录。

• 第三方服务集成
  • 当网站集成了第三方的分析工具或者广告服务时，这些第三方服务可能与主站不同源，需要处理跨域Cookie以便准确统计用户行为或者进行精准广告投放。

五、解决跨域Cookie问题的方法

1. 服务器端设置CORS（跨域资源共享）头信息
   • 在服务器端响应中设置Access - Control - Allow - Origin为特定的源（不能使用通配符*如果要发送Cookie），并且设置Access - Control - Allow - Credentials为true。
   • 例如，在Node.js的Express框架中：
   • 例如，在Node.js的Express框架中：

• 客户端设置
  • 在发送AJAX请求时（例如使用XMLHttpRequest或者fetch），需要设置withCredentials属性为true。
  • 使用fetch的示例：
  • 使用fetch的示例：
• JSONP（仅适用于GET请求且不安全，不推荐用于现代应用）
  • JSONP通过动态创建<script>标签来绕过同源策略，但它不能直接处理Cookie，并且存在安全风险，如XSS（跨站脚本攻击）漏洞。所以一般不建议使用JSONP来解决跨域Cookie问题。
• 代理服务器
  • 在同源的服务器端设置一个代理，前端向同源的代理服务器发送请求，代理服务器再向目标跨域服务器发送请求并将结果返回给前端。这样就可以避免浏览器的跨域限制，同时可以处理Cookie的相关操作。例如，在Node.js中可以使用http - proxy - middleware库来设置代理。