Cookie本地正常线上无法获取，提示token未定义问题求助

1. 检查Cookie的SameSite与Secure属性 #

生产环境下Cookie的安全属性配置直接影响可访问性：

• 跨域场景：后端设置Cookie时必须指定SameSite=None，同时搭配Secure属性（仅HTTPS环境生效），否则浏览器会拦截Cookie。
• 同域名/子域名场景：设置SameSite=Lax或Strict，并指定Domain为顶级域名（如.yourdomain.com），确保子域名页面能共享Cookie。

2. 核对Cookie的Domain与Path属性 #

• 后端设置的Domain必须匹配前端页面的实际域名，禁止使用localhost（生产环境无效）。比如前端部署在app.yourdomain.com，Domain需设为.yourdomain.com或app.yourdomain.com。
• Path默认值为/，若后端指定了特定路径（如/admin），只有该路径下的页面能获取Cookie，需确保前端页面路径与Cookie的Path一致。

3. 排查HttpOnly属性限制 #

如果后端设置了HttpOnly属性，前端无法通过JS（包括js-cookie、document.cookie）获取该Cookie。这种情况需调整鉴权逻辑：

• 前端请求时自动携带Cookie（需配置请求凭证），后端通过请求头验证Cookie有效性，无需前端手动获取token。

4. 检查自定义Cookie工具函数的逻辑 #

对比自定义工具函数与js-cookie的实现，排查语法或逻辑错误：

• 确保getCookie函数正确处理Cookie字符串分割，比如：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

• 确认Cookie名称大小写完全匹配（Cookie名称区分大小写）。

5. 跨域场景的请求凭证配置 #

若前后端跨域部署，需同时配置两端：

• 前端请求添加凭证：fetch用credentials: 'include'，axios用withCredentials: true，确保浏览器跨域请求时携带Cookie。
• 后端CORS配置：开启Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin必须指定具体前端域名，不能用*。

6. 清理浏览器缓存与冲突Cookie #

• 清除生产环境浏览器的Cookie缓存，避免旧的无效Cookie干扰。
• 检查是否存在同名Cookie（不同路径/域名下），导致获取到的是无效值。

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