Angular10+Express本地环境Cookies与Local Storage为空问题求助

• 先验证LocalStorage基础功能

  • 直接在浏览器控制台执行localStorage.setItem('test', '123')，再用localStorage.getItem('test')检查是否能读取。如果控制台操作都失败，排查是否开启了浏览器隐私模式，或是安装了禁用本地存储的隐私类扩展。
  • 在前端代码的localStorage.setItem前添加console.log(authUser)，确认authUser是否为undefined或空对象——若数据本身无效，存进LocalStorage也会表现为空。

• 跨域场景下的Cookies配置检查

  • 后端Express的CORS中间件必须明确配置：设置credentials: true，同时指定origin: 'http://localhost:4200'（不能用通配符*，否则浏览器会拒绝携带凭证）。
  • 后端设置Cookie时，需调整属性：添加sameSite: 'Lax'（本地http环境不能用None，否则需配合secure: true但http不支持），指定path: '/'确保全站生效，domain可设为localhost或留空使用默认值。
  • 前端Angular请求需开启withCredentials: true：无论用HttpClient还是其他请求库，必须开启该选项，否则浏览器不会发送或保存Cookie。

• CSRF防护的影响排查

  • 临时注释后端CSRF防护代码，测试功能是否恢复。若恢复正常，说明CSRF配置存在问题：
    • 确认前端是否正确获取并携带CSRF Token：若后端用csurf中间件，Token通常存在Cookie中，前端需取出后在请求头（如XSRF-TOKEN）中携带。
    • 检查CSRF Token的Cookie属性：确保sameSite、domain配置正确，保证前端能读取到该Cookie。

• 浏览器存储权限与安全策略

  • 查看浏览器站点权限：点击地址栏锁图标，确认“Cookie和网站数据”未被设置为阻止，改为允许状态。
  • 检查本地协议：若后端Cookie设置了secure: true，本地http环境下浏览器不会保存该Cookie，需临时将secure改为false（生产环境改回true）。

• 代码执行流程问题排查

  • 确认localStorage.setItem的执行时机：是否在异步请求未返回、authUser未赋值时就执行了？比如误将代码写在请求subscribe外部，导致存入空值。
  • 排查是否有后续代码清除存储：检查路由守卫、拦截器或其他逻辑中，是否存在localStorage.clear()或删除authUser键的操作。

内容的提问来源于stack exchange，提问作者Ondřej Ševčík