跨localhost端口校验JWT令牌Cookie及实现安全跳转的方案咨询

浏览器的同源策略限制：localhost:3000和localhost:3001属于不同源（端口不同），而localStorage是同源存储机制，管理端（3001）无法读取客户端（3000）存入的token，因此会直接重定向回登录页。

方案一：使用Cookie跨域传递JWT（推荐，符合安全规范） #

1. 后端配置Cookie跨域参数 #

客户端登录成功后，不要将token存入localStorage，而是让后端在返回响应时设置跨域Cookie。以Node.js/Express为例，后端代码如下：

// 登录接口返回时设置Cookie
res.cookie('admin_token', response.data, {
  domain: 'localhost', // 共享localhost下的所有端口
  path: '/',
  sameSite: 'None', // 允许跨域请求携带Cookie
  secure: process.env.NODE_ENV === 'production', // 生产环境必须开启HTTPS并启用该选项
  httpOnly: true, // 禁止前端通过JS读取Cookie，防范XSS攻击
  maxAge: 24 * 60 * 60 * 1000 // 有效期1天
});

2. 客户端登录逻辑修改 #

移除localStorage存储操作，直接跳转管理端：

if (response.data) {
  window.location.href = "http://localhost:3001/";
}

3. 管理端读取Cookie并校验 #

编写工具函数从Cookie中提取token，替换原有的localStorage读取逻辑：

// 工具函数：获取指定名称的Cookie值
const getCookie = (name) => {
  const cookieStr = `; ${document.cookie}`;
  const cookieParts = cookieStr.split(`; ${name}=`);
  return cookieParts.length === 2 ? cookieParts.pop().split(';').shift() : null;
};

useEffect(() => {
  const token = getCookie('admin_token');
  console.log('Token:', token);
  
  if (!token) {
    window.location.href = 'http://localhost:3000/login'; 
  } else {
    // 此处添加token校验逻辑（比如调用后端接口验证token有效性）
  }
}, []);

注意：管理端前端向后端发送请求时，需配置withCredentials: true（如Axios），确保Cookie能被携带到后端完成校验。

方案二：URL参数临时传递（仅开发环境测试用，生产禁用） #

这种方式简单但不安全，token会暴露在URL中（浏览器历史、服务器日志等），仅适合临时调试：

1. 客户端跳转时携带token参数 #

if (response.data) {
  // 编码token避免特殊字符问题
  const encodedToken = encodeURIComponent(response.data);
  window.location.href = `http://localhost:3001/?token=${encodedToken}`;
}

2. 管理端提取token并处理 #

useEffect(() => {
  const urlParams = new URLSearchParams(window.location.search);
  const token = urlParams.get('token');
  
  console.log('Token:', token);
  if (!token) {
    window.location.href = 'http://localhost:3000/login'; 
  } else {
    // 将token存入管理端的localStorage，后续使用
    localStorage.setItem('token', token);
    // 移除URL中的token参数，避免泄露
    window.history.replaceState({}, document.title, window.location.pathname);
  }
}, []);

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