FastAPI中间件无法获取access-token请求头值问题求助

问题根源 #

你遇到的是CORS预检请求导致的问题：

• React在跨域发起带自定义头（如access-token）的请求时，浏览器会自动先发送一个OPTIONS类型的预检请求，这个请求仅用于确认后端是否允许跨域请求，不会携带实际的access-token值，只会在access-control-request-headers字段中声明后续实际请求要携带的头。
• 你的中间件当前会处理所有请求（包括OPTIONS），所以在预检请求阶段读取access-token自然会得到None。
• Swagger UI与后端同域，不会触发预检请求，因此能正常获取到token。

解决步骤 #

1. 让中间件跳过OPTIONS请求处理 #

修改你中间件的逻辑，先判断请求方法是否为OPTIONS，若是则直接放行，不处理token逻辑：

async def authentication_middleware(request: Request, call_next):
    # 跳过OPTIONS预检请求
    if request.method == "OPTIONS":
        return await call_next(request)
    
    # 后续你的token处理逻辑
    token = request.headers.get("access-token")
    # ... 剩余代码

2. 正确配置FastAPI的CORS中间件 #

确保后端配置了允许access-token头的CORS策略，避免浏览器拦截实际请求：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://your-react-domain.com"],  # 生产环境替换为你的React实际域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["access-token", "content-type"],  # 明确允许自定义头
)

3. 验证React请求的头配置 #

确认React代码中是在实际请求（非OPTIONS）里正确携带了access-token，比如使用axios时：

import axios from 'axios';

axios.get('/your-api-endpoint', {
    headers: {
        'access-token': 'your-actual-token-value'
    }
});

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