如何在React应用中获取Authorization头以提取外部服务发送的JWT Token？

你之前用axios.defaults.headers.common["Authorization"]的思路完全错了——这个属性是用来设置你自己的axios请求要发送的头，而不是获取外部服务发给你的请求头，所以肯定拿不到目标Token。下面分两种常见场景给出可靠实现方式：

场景1：服务器端渲染（SSR）/带服务器逻辑的框架（如Next.js、Remix） #

在服务器端的请求处理环节，能直接读取到外部服务发来的HTTP请求头，再把Token传递给客户端组件即可。

以Next.js的getServerSideProps为例：

export async function getServerSideProps(context) {
  // 从请求头中提取Authorization字段
  const authHeader = context.req.headers.authorization;
  let jwtToken = null;
  
  // 通常Authorization格式为「Bearer <token>」，拆分出Token部分
  if (authHeader && authHeader.startsWith('Bearer ')) {
    jwtToken = authHeader.split(' ')[1];
  }

  // 将Token作为props传给客户端组件
  return {
    props: { jwtToken }
  };
}

// 组件中直接使用传入的Token
function AuthPage({ jwtToken }) {
  useEffect(() => {
    if (jwtToken) {
      // 处理认证逻辑：比如存入localStorage或全局状态
      localStorage.setItem('userAuthToken', jwtToken);
    }
  }, [jwtToken]);

  return <div>{jwtToken ? "认证Token已获取" : "未检测到有效Token"}</div>;
}

场景2：纯客户端SPA（如Create React App） #

纯浏览器环境下，JS无法直接读取页面加载时的请求头（浏览器安全限制）。如果外部服务是通过API请求传递Token，需要在你的后端接口中转一下：

1. 后端接口（示例用Node.js/Express） #

const express = require('express');
const cors = require('cors');
const app = express();

// 跨域配置：必须暴露Authorization头，否则前端拿不到
app.use(cors({
  exposedHeaders: ['Authorization']
}));

// 中转接口：读取外部服务发来的Authorization头，返回给前端
app.get('/api/get-auth-token', (req, res) => {
  const authHeader = req.headers.authorization;
  if (authHeader && authHeader.startsWith('Bearer ')) {
    const token = authHeader.split(' ')[1];
    res.json({ token });
  } else {
    res.status(401).json({ error: '未检测到Authorization头' });
  }
});

app.listen(3001);

2. React组件中调用接口获取Token #

import { useEffect, useState } from 'react';
import axios from 'axios';

function AuthComponent() {
  const [token, setToken] = useState(null);

  useEffect(() => {
    const fetchToken = async () => {
      try {
        const res = await axios.get('http://localhost:3001/api/get-auth-token');
        setToken(res.data.token);
        // 存入全局状态或本地存储
        localStorage.setItem('userAuthToken', res.data.token);
      } catch (err) {
        console.error('获取Token失败：', err);
      }
    };

    fetchToken();
  }, []);

  return <div>{token ? `Token：${token.slice(0, 10)}...` : '正在获取Token'}</div>;
}

关键注意事项 #

• 跨域场景下，后端必须配置exposedHeaders允许前端访问Authorization头，否则会被浏览器拦截。
• 不要在页面上直接展示完整Token，仅在内部逻辑中使用。
• 建议将Token存入React Context或Redux，方便全局组件共享，避免重复请求。

内容的提问来源于stack exchange，提问作者Muhammad Ibrahim Jan