JavaScript无法跨域写入Cookie,只能读取服务端已通过Set-Cookie(含Domain=.example.com、Secure、SameSite=None)设置的跨子域Cookie;HttpOnly时JS不可读但浏览器自动携带。

JavaScript 本身不能跨域写入 Cookie,但可以在主域与子域之间共享已由服务端设置好的 Cookie——前提是服务端正确配置了 Domain、Secure、SameSite 等关键属性。前端 JS 的作用是读取、校验和配合流程,而非“突破限制”去写跨域 Cookie。
必须由服务端设置跨域 Cookie
浏览器禁止前端 JavaScript 向非当前域写 Cookie(哪怕只是子域)。真正有效的跨域子域名共享,依赖服务端响应头中的 Set-Cookie:
- 服务端返回:
Set-Cookie: token=abc123; Domain=.example.com; Path=/; Secure; HttpOnly; SameSite=None -
Domain=.example.com(注意开头的点)表示该 Cookie 对example.com、www.example.com、api.example.com等所有子域都可见 -
Secure和SameSite=None必须同时存在,否则现代浏览器(Chrome/Firefox/Safari)会直接拒绝存储 -
HttpOnly表示 JS 无法读取该 Cookie(更安全),此时前端只能通过 API 请求间接使用它
前端 JS 只能读取同源或已共享的 Cookie
当 Cookie 已被服务端正确设为 Domain=.example.com,且当前页面在任意子域(如 app.example.com)下运行时,JS 就能用 document.cookie 或 js-cookie 读取它:
- 基础读取:
document.cookie返回字符串,需手动解析(注意:仅对非HttpOnlyCookie 有效) - 推荐用库:
Cookies.get('token')(来自 js-cookie),简洁可靠 - 若服务端设置了
HttpOnly,JS 读不到值,但浏览器会在每次发往.example.com域的请求中自动携带该 Cookie
关键配置细节不能错
哪怕一个字符出错,子域间共享就会失败:
-
Domain 值必须带前导点:✅
.example.com;❌example.com(部分浏览器不认子域)、❌www.example.com(仅限该子域) -
协议必须统一:全站启用 HTTPS,否则
Secure会导致 HTTP 页面无法发送 Cookie -
Path 最好设为
/:避免因路径不同(如/adminvs/user)导致子域间不可见 -
本地调试慎用 localhost:它不支持二级域名 Cookie;建议用
dev.example.com+ hosts 绑定或使用127.0.0.1.xip.io类服务
常见误操作与替代思路
以下做法在现代浏览器中基本失效或不推荐:
- 用
fetch(..., { credentials: 'include' })向跨域登录接口“写 Cookie”——它只能发送已有 Cookie,不能设置新 Cookie - 把 token 存 localStorage 再手动加到每个请求 header——这不是 Cookie 共享,也不满足 SSO 的单点登出要求,且易受 XSS 攻击
- 依赖
document.domain = 'example.com'——该方式仅适用于老式 iframe 场景,且已被 Chrome 92+ 废弃,不再适用于 Cookie 共享 - 试图用 JS 拼接
document.cookie = 'a=b; domain=.example.com'设置跨域 Cookie——浏览器会静默忽略,不报错也不生效
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











