如何使用Firebase Auth从React向Express.js发送身份验证令牌

问题根因 #

• 异步时序错误：auth.onAuthStateChanged、user.getIdToken 都是异步执行的逻辑，你导出axios实例时异步回调还未触发，创建实例用的config还没有authorization字段。后续修改config对象不会同步更新已经创建完成的axios实例配置，因此请求不会携带授权头。
• 可能存在CORS配置缺失：即使前端正确携带头，跨域场景下如果后端CORS没有允许Authorization头，浏览器会自动过滤该字段，导致后端无法获取。

正确实现方案 #

1. 前端httpClient.js修改为请求拦截器实现 #

用axios请求拦截器可以在每次发送请求前动态获取最新的token挂载到请求头，避免异步时序问题：

import axios from 'axios'
import { auth } from '../firebase/firebase'

// 先创建axios实例
const httpClient = axios.create({
  baseURL: "http://127.0.0.1:5000/",
  timeout: 5000,
})

// 添加请求拦截器，请求发送前挂载token
httpClient.interceptors.request.use(
  async (config) => {
    const currentUser = auth.currentUser
    if (currentUser) {
      const token = await currentUser.getIdToken()
      // 标准授权头格式，后端取的时候注意前缀处理
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => Promise.reject(error)
)

export default httpClient

2. 后端Express配置CORS允许授权头 #

如果使用cors中间件，需要显式允许Authorization头：

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

app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的前端实际访问地址
  allowedHeaders: ['Content-Type', 'Authorization']
}))

// 后续路由逻辑正常写即可

注意事项 #

• Express中请求头的所有键名会自动转为小写，获取时需要用req.headers.authorization，不能用大写开头的写法。
• 验证token前需要先去掉Bearer 前缀再做校验。

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