React应用中如何在server.js为API请求传递Access Token至请求头

针对server.js中无法访问React App Context、无法为/api/v1和/sso/saml/acs接口添加Access Token的问题，提供以下三种可行实现方式：

1. 用HttpOnly Cookie存储Token（推荐） #

前端登录成功后，将Access Token存入HttpOnly、Secure的Cookie中（生产环境建议开启Secure，仅在HTTPS下传输），server端可直接从请求的Cookie中读取Token并添加到Authorization头。

实现步骤： #

• 后端设置Cookie（推荐由后端处理，避免前端操作带来的安全风险）：

  // Node.js/Express示例：登录接口返回Token时设置Cookie
  res.cookie('accessToken', user.accessToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict', // 根据跨域需求调整为'lax'或'none'
    maxAge: 24 * 60 * 60 * 1000 // 有效期1天
  });
  

• server.js中处理目标接口时读取Cookie并赋值请求头：

  // 处理/api/v1前缀的接口
  app.use('/api/v1', (req, res, next) => {
    const accessToken = req.cookies.accessToken;
    if (accessToken) {
      req.headers.authorization = `Bearer ${accessToken}`;
    }
    next(); // 继续执行后续逻辑或转发请求
  });
  
  // 处理/sso/saml/acs接口
  app.post('/sso/saml/acs', (req, res) => {
    const accessToken = req.cookies.accessToken;
    if (accessToken) {
      req.headers.authorization = `Bearer ${accessToken}`;
    }
    // 后续SAML ACS逻辑处理
  });
  

• 优点：规避XSS攻击风险，server端无需依赖前端上下文即可直接获取Token。

2. 前端发起请求时携带Token，server端转发复用 #

如果这些server端接口是前端发起的代理请求（比如用http-proxy-middleware转发到后端服务），前端从App Context取出Token并携带在请求头中，server端读取后添加到转发的请求头里。

实现步骤： #

• 前端组件中发起请求时携带Token：

  // React组件示例：从App Context取Token并添加到请求头
  const { accessToken } = useContext(AppContext);
  fetch('/api/v1/user-info', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${accessToken}`
    }
  });
  

• server端配置代理时读取请求头并转发：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  app.use('/api/v1', createProxyMiddleware({
    target: 'https://your-backend-service.com',
    changeOrigin: true,
    onProxyReq: (proxyReq, req, res) => {
      const authHeader = req.headers.authorization;
      if (authHeader) {
        proxyReq.setHeader('Authorization', authHeader);
      }
    }
  }));
  
  // /sso/saml/acs接口同理，若为转发请求，在处理逻辑中读取req.headers.authorization并赋值
  

3. 基于Session存储Token #

如果应用使用会话管理（如express-session），登录时将Access Token存入Session，server端处理接口时直接从Session中读取并添加到请求头。

实现步骤： #

• 配置express-session：

  const session = require('express-session');
  app.use(session({
    secret: 'your-secure-secret-key',
    resave: false,
    saveUninitialized: false,
    cookie: { secure: process.env.NODE_ENV === 'production' }
  }));
  

• 登录接口将Token存入Session：

  app.post('/login', (req, res) => {
    // 验证用户后获取accessToken
    const accessToken = '...';
    req.session.accessToken = accessToken;
    res.send({ success: true });
  });
  

• server端处理目标接口时读取Session：

  app.use('/api/v1', (req, res, next) => {
    if (req.session.accessToken) {
      req.headers.authorization = `Bearer ${req.session.accessToken}`;
    }
    next();
  });
  
  // /sso/saml/acs接口同理
  

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