Spring Security浏览器访问Chat页报401，Postman正常问题排查

错误根源 #

你遇到的401问题核心在于：window.location.href触发的页面跳转请求，是浏览器自主发起的全新请求，不会携带你在AJAX请求中设置的Authorization头，也不会自动从localStorage读取Token添加到请求头里。而Postman是手动添加了Token头，所以能正常访问。

具体解决方案 #

方案1：用Cookie存储Token（推荐，符合浏览器认证最佳实践）

• 后端调整：修改登录接口，将JWT Token设置为Cookie（优先设置HttpOnly属性，防止XSS攻击；若需前端读取可去掉该属性）。浏览器会自动在后续同域请求中携带Cookie，包括页面跳转请求，服务器即可正常验证Token。
• 前端简化代码：登录成功后无需先发起AJAX请求，直接跳转即可：

// 登录成功后的逻辑替换为：
let jwt = response.jwt;
// 如需前端保留Token可继续存在localStorage，否则可省略
localStorage.setItem("token", jwt);
// 直接跳转聊天页
window.location.href = "http://localhost:8080/chat";

方案2：URL参数传递Token（仅测试环境临时使用，不安全）

• 跳转时将Token拼接到URL参数中：

window.location.href = `http://localhost:8080/chat?token=${jwt}`;

• 后端适配：修改认证逻辑，支持从URL参数中读取Token进行验证。但此方式Token会暴露在地址栏、浏览器历史记录中，存在安全风险，生产环境禁止使用。

方案3：单页应用路由拦截（针对SPA场景）

若你的项目是单页应用，可通过路由工具（如Vue Router、React Router）的全局拦截器，在路由跳转前统一为请求添加Authorization头。例如用axios封装请求：

// 全局设置请求头
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

但此方案仅适用于单页应用，多页应用下体验较差，不推荐。

额外检查点 #

• 确认后端JWT认证过滤器是否正确处理Authorization: Bearer <token>请求头，若用Cookie方案则需确保过滤器支持从Cookie读取Token。
• 若存在跨域场景，需确认后端CORS配置允许携带Credentials（不过你的请求是同域localhost:8080，此点可忽略）。

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