React用universal-cookies设Cookie时Chrome存储异常但Firefox正常

问题本质 #

你碰到的内存缓存有值、get接口拿不到的错位问题，是两个连锁触发的bug：

• 你写的Cookie配置键名大小写不对，导致关键写入参数完全没生效
• 触发了Chrome对跨站iframe场景的Cookie强制拦截规则

具体修正步骤 #

1. 修正Cookie配置的键名大小写错误 #

universal-cookies的Cookie序列化逻辑严格匹配全小写的配置键，你当前代码里写的Secure: true因为首字母大写，根本不会被解析成有效配置，等于完全没把Secure参数传给浏览器的Cookie写入接口。

错误写法：

const cookies = new Cookies();
cookies.set('test_cookie', true, {
    sameSite: 'none',
    Secure: true, // 大写键名无法被识别
});

正确写法：

cookies.set('test_cookie', true, {
    sameSite: 'none',
    secure: true, // 严格小写键名才能生效
});

2. 理解接口返回值错位的原因 #

你之所以能在console.log(cookies.cookies)里看到test_cookie的值，是因为universal-cookies在执行set方法时，会先把写入的内容存在内存级的内部缓存里，不会先校验浏览器是否真的接受了这个Cookie的写入。
而cookies.get()、cookies.getAll()的读取逻辑是优先从浏览器原生Cookie存储里取值，只有当原生Cookie读取为空时才会兜底读内存缓存。一旦浏览器因为参数不合法拒绝写入Cookie，就会出现内存缓存有值、实际读取返回空的断层。
Firefox没有这个异常的原因也很直接：它对跨站嵌入场景的Cookie拦截阈值更宽松，就算原生Cookie写入失败，也能通过插件的内存缓存兜底拿到值，所以测试时不会暴露这个问题。

3. 适配Chrome嵌入式跨站的额外硬要求 #

因为你的应用是嵌入在其他站点的iframe里运行，就算修正了大小写问题，Chrome从83版本开始对SameSite=None的跨站Cookie有强制校验，必须同时满足以下条件才能正常写入和读取：

• 站点必须运行在HTTPS环境下，HTTP站点下就算配置了secure: true，SameSite=None的Cookie也会被直接丢弃
• 确认浏览器没有拦截第三方Cookie：部分新版Chrome默认开启第三方Cookie拦截，会直接丢弃所有iframe嵌入场景下写入的Cookie，可以通过地址栏左侧的站点权限面板检查当前嵌入源的Cookie权限
• 不要手动指定错误的domain配置：默认使用根路径path: '/'即可，手动把domain配成嵌入方的主站域名会导致Cookie无法被应用自身的源读取

验证方法 #

修正完成后，不要依赖插件的内部缓存值做判断，直接打开浏览器开发者工具的「应用」面板，找到对应应用源的Cookie列表，确认test_cookie真实存在于存储中，且SameSite属性为None、Secure属性为勾选状态，此时再调用cookies.get()就能拿到正常返回值。

内容的提问来源于stack exchange，提问作者Snuh