无法在客户端访问或删除Express服务端下发的非httpOnly类型Cookie

常见原因及修复方法 #

• 跨域请求未配置凭据支持
  前后端不同源（协议/域名/端口任意不一致）时，必须同时配置两端的凭据允许规则，否则响应Cookie不会被写入前端域：
  服务端CORS配置示例：

  const cors = require('cors');
  app.use(cors({
    origin: '你的前端完整源地址', // 不允许使用通配符*
    credentials: true
  }));
  

  前端请求配置示例：

  // fetch写法
  fetch('接口地址', { credentials: 'include' });
  // axios写法
  axios.get('接口地址', { withCredentials: true });
  

• Domain/Path配置和前端页不匹配
  Express默认设置的Cookie Domain为服务端接口域名、Path为/，如果和前端页面的域名/路径不匹配，Cookie只会关联到服务端域下，不会出现在前端页的Application面板中，可显式配置匹配规则：

  res.cookie("mycookie", "test", {
    httpOnly: false,
    domain: '.your-domain.com', // 填前后端共用的父域名，同站可省略
    path: '/' // 匹配所有路径，按需调整
  });
  

• SameSite默认策略拦截
  Chrome对未显式设置SameSite的Cookie默认应用SameSite=Lax规则，跨站请求、非GET类的非导航请求都会被拦截。跨站场景需要显式配置SameSite=None且搭配HTTPS使用：

  // 同站场景
  res.cookie("mycookie", "test", { httpOnly: false, sameSite: 'Lax' });
  // 跨站场景（必须用HTTPS协议）
  res.cookie("mycookie", "test", { httpOnly: false, sameSite: 'None', secure: true });
  

• 沙箱环境权限不足
  如果前端页面运行在iframe中，且iframe设置了sandbox属性但未添加allow-same-origin，页面会被设为不透明源，无法访问Cookie，document.cookie会返回undefined，给iframe添加allow-same-origin属性即可修复。

• 安全策略拦截
  可在Chrome开发者工具Network面板找到对应接口请求，查看「Cookie」标签页的红色警告提示，即可明确是被CSP、第三方Cookie拦截等哪种安全规则限制，对应调整规则即可。

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