FastAPI+React JWT认证上线后遇CORS错误求助

核心问题分析 #

• React的proxy配置仅在开发环境（npm start）生效，生产构建后该配置无效，此时React应用直接向API发起跨域请求，需FastAPI正确配置CORS策略。
• React登录请求的Content-Type与请求体格式不匹配，可能导致服务器解析错误，间接触发CORS相关报错。

解决方案步骤 #

1. 修复FastAPI的CORS中间件配置 #

在FastAPI项目中添加正确的CORS中间件，允许React生产环境域名的跨域请求：

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

app = FastAPI()

# 替换为你的React应用生产域名（如https://your-react-domain.com），同时保留本地开发域名
allowed_origins = [
    "https://your-react-app-domain.com",
    "http://localhost:3000"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=allowed_origins,  # 允许指定域名跨域
    allow_credentials=True,  # 若需携带Cookie或认证信息，必须设为True
    allow_methods=["*"],  # 允许所有HTTP方法
    allow_headers=["*"]   # 允许所有请求头
)

2. 修正React登录请求的格式错误 #

当前请求的Content-Type设为application/x-www-form-urlencoded，但请求体使用JSON.stringify包裹字符串，格式不匹配。需改用URLSearchParams构造正确的表单数据：

const submitLogin = async () => {
    if (email === "" && password === "") {
        setEmailError("Email is required")
        setPwdError('Password is required')
    } else if (email === "") {
        setPwdError('')
        setEmailError("Email is required")
    } else if (password === "") {
        setEmailError('')
        setPwdError('Password is required')
    } else {
        setEmailError('')
        setPwdError('')
        
        // 构造符合x-www-form-urlencoded格式的请求体
        const formData = new URLSearchParams();
        formData.append('username', email);
        formData.append('password', password);
        // 按需添加其他字段（如grant_type、client_id等）
        // formData.append('grant_type', '');
        // formData.append('scope', '');

        const requestOptions = {
            method: "POST",
            headers: {
                "accept": "application/json",
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body: formData  // 直接传入URLSearchParams对象
        }

        // 生产环境需使用完整API地址（可通过环境变量配置）
        // const apiUrl = process.env.REACT_APP_API_URL + "/api/login";
        const response = await fetch("api/login", requestOptions)
        
        try {
            const res = await response.json();
            console.log(res);
            if (!response.ok) {
                // steErrorMessage(res.detail);
            } else {
                // setToken(res.access_token);
                // steErrorMessage('');
            }
        } catch (error) {
            console.log(error);
        }
    }
}

3. 生产环境跨域处理方案 #

由于React的proxy仅支持开发环境，生产环境需二选一：

• 环境变量配置API地址：在React项目的.env.production中添加REACT_APP_API_URL=https://www.api.zoneanimee.com，请求时使用${process.env.REACT_APP_API_URL}/api/login。
• 反向代理：通过Nginx或托管平台的代理设置，将React域名下的/api请求转发到API域名，彻底避免跨域。

4. 验证API端点兼容性 #

确保FastAPI的登录端点支持application/x-www-form-urlencoded格式：

• 若使用官方OAuth2方案（OAuth2PasswordRequestForm），该格式已默认支持。
• 若为自定义端点，需使用Form依赖而非JSON来解析请求体。

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