前端登录后接口仍是未登录怎么办：从 Cookie 是否发送一步步排查

我们先看一个很像“后端接口坏了”的联调现场：登录接口返回成功，浏览器里也跳到了首页，但一刷新用户信息接口，后端又说未登录，状态码可能是 401，也可能业务码是未登录。

这类问题不要先急着改登录逻辑。我们要先确认一件更基础的事：浏览器到底有没有保存 Cookie，后续请求又有没有把它带出去。只要顺着这条线查，很多看似玄学的登录态问题都能很快收敛。

适合人群

本文适合正在做前后端分离登录、跨域接口联调、Cookie 登录态排查的前端开发者。你需要了解浏览器 Network 面板、fetch 请求和基础 HTTP 响应头。

目录

• 问题现场：登录成功后接口仍然未登录
• 初步判断：先看 Cookie 有没有保存
• 动手验证：请求里到底有没有带 Cookie
• 定位原因：fetch、CORS、SameSite、域名路径逐个排除
• 修复方案：前端请求和后端响应头要配成一组
• 验证结果：刷新、跨页、重新打开都能保持登录
• 常见坑位和排查清单

问题现场：登录成功后接口仍然未登录

我们先复现一个典型场景。登录接口看起来是成功的：

POST /api/login
HTTP 200
{"code":0,"msg":"login ok"}

但是紧接着请求用户信息接口，却拿到了未登录：

GET /api/user/profile
HTTP 401
{"code":401,"msg":"请先登录"}

第一反应可能是后端 Session 没写进去，或者 token 生成失败。但我们先不下结论。打开浏览器 Network，重点看两件事：

• 登录响应里有没有 Set-Cookie。
• 用户信息请求里有没有 Cookie。

初步判断：先看 Cookie 有没有保存

第一步看登录接口的响应头。如果响应里完全没有 Set-Cookie，那浏览器没有可保存的登录凭证，前端后续请求自然不会带 Cookie。

Set-Cookie: sid=abc123; Path=/; HttpOnly; SameSite=Lax

如果响应里有 Set-Cookie，再打开 Application 面板的 Cookies 区域，看当前站点下有没有对应的 sid。这一步能帮我们区分两个问题：

• Cookie 没有被浏览器保存。
• Cookie 保存了，但请求时没有被发送。

这两个问题看起来都是“未登录”，但修法不一样。

动手验证：请求里到底有没有带 Cookie

接着看用户信息接口的 Request Headers。真正参与鉴权的是请求里的 Cookie 头，而不是 Application 面板里“看起来有 Cookie”。

GET /api/user/profile
Cookie: sid=abc123

如果这里没有 Cookie，说明浏览器没有把登录态发给接口。我们现在可以把排查范围缩小到请求配置、跨域规则和 Cookie 属性。

定位原因：fetch、CORS、SameSite、域名路径逐个排除

1. fetch 默认不会在跨域请求里带 Cookie

如果前端页面是 https://www.example.com，接口是 https://api.example.com，这已经属于跨源请求。fetch 需要显式声明携带凭证：

fetch('https://api.example.com/api/user/profile', {
  method: 'GET',
  credentials: 'include'
});

如果你使用 axios，也要确认实例里打开了对应开关：

const api = axios.create({
  baseURL: 'https://api.example.com',
  withCredentials: true
});

2. CORS 响应头不能只配通配符

前端打开凭证后，后端响应头也要配合。关键点是：允许来源不能用 *，必须写具体页面来源。

Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Credentials: true

如果这里仍然是 *，浏览器会拒绝把带凭证的跨域响应交给前端代码。Network 里可能已经能看到请求发出，但控制台会提示跨域凭证规则不匹配。

3. SameSite 和 Secure 会影响跨站发送

如果页面和接口跨站点，比如页面在 www.site-a.com，接口在 api.site-b.com，Cookie 想在这种请求里发送，通常需要：

Set-Cookie: sid=abc123; Path=/; SameSite=None; Secure; HttpOnly

这里有两个容易忽略的点：

• SameSite=None 往往需要配合 Secure。
• Secure 意味着必须走 HTTPS。

4. Domain 和 Path 也会限制发送范围

Cookie 不是保存了就会发给所有接口。它还会被 Domain 和 Path 限制。

Set-Cookie: sid=abc123; Domain=.example.com; Path=/api; HttpOnly

上面这个 Cookie 可以发给 api.example.com/api/user/profile，但不会发给不匹配路径的请求。如果登录接口设置的 Path 太窄，后续接口也可能拿不到登录态。

修复方案：前端请求和后端响应头要配成一组

现在我们把修复方案整理成一组配置。前端负责“请求愿意带凭证”：

async function getProfile() {
  const res = await fetch('https://api.example.com/api/user/profile', {
    method: 'GET',
    credentials: 'include'
  });

  if (res.status === 401) {
    throw new Error('login required');
  }

  return res.json();
}

后端负责“允许这个来源带凭证，并设置可发送的 Cookie”。响应头需要和前端来源对齐：

Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Credentials: true
Set-Cookie: sid=abc123; Domain=.example.com; Path=/; SameSite=None; Secure; HttpOnly

如果是同站点子域联调，SameSite=Lax 也可能足够；如果是跨站点嵌入或独立域名，就要按上面的跨站规则检查。

验证结果：刷新、跨页、重新打开都能保持登录

修复后，我们不要只看登录按钮是否跳转成功，而是按下面几步确认：

• 登录接口响应里有正确的 Set-Cookie。
• Application 面板能看到 sid。
• 用户信息接口 Request Headers 里带了 Cookie。
• 刷新页面后，用户信息接口仍返回当前用户。
• 重新打开浏览器窗口后，符合过期时间预期。

这一步很重要。只要请求头里确实带着 Cookie，前端侧的“没带登录态”就可以排除，下一步才轮到后端 Session 存储、过期时间和服务实例共享这些问题。

常见坑位和排查清单

1. 只看 Application，不看 Request Headers

Application 里有 Cookie，只能说明浏览器保存过；真正发送给接口，要看具体请求的 Request Headers。

2. 前端开了凭证，后端仍然用通配符来源

带凭证的跨域请求不能配 Access-Control-Allow-Origin: *。要返回具体页面来源，并且返回 Access-Control-Allow-Credentials: true。

3. 本地 HTTP 环境调跨站 Cookie

如果 Cookie 带了 Secure，HTTP 页面下不会发送。联调时要么改成本地 HTTPS，要么先确认环境策略和线上一致。

4. Cookie 的 Domain 写得太死

接口域名、页面域名和 Cookie Domain 不匹配时，浏览器不会发送 Cookie。子域场景通常要认真检查是否应该使用 .example.com。

总结一下，这类问题的排查顺序是：先看登录响应有没有 Set-Cookie，再看浏览器有没有保存，接着看后续请求有没有带 Cookie。如果没带，就按 fetch 凭证、CORS 响应头、SameSite/Secure、Domain/Path 这条线逐个排除。这样查，登录成功但接口仍未登录的问题通常不会绕太久。