FastAPI服务端报错却显示CORS错误，如何在前端展示真实错误？

你的问题本质是：后端出现未处理异常时，没有返回带有正确CORS响应头的错误信息，导致浏览器误判为CORS错误。以下是具体解决步骤：

1. 确保CORS中间件在FastAPI中优先加载 #

FastAPI的中间件按注册顺序执行，CORS中间件必须放在所有中间件最前面，这样即使后续逻辑抛出异常，CORS头也能被正确添加到响应中。

示例代码：

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

app = FastAPI()

# 先注册CORS中间件
app.add_middleware(
    CORSMiddleware,
    allow_origins=["你的React域名"],  # 生产环境禁止用*，指定具体域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 再添加其他中间件和路由
@app.get("/api/test")
async def test_route():
    # 模拟报错
    raise ValueError("测试后端错误")

2. 自定义全局异常处理器，强制添加CORS头 #

FastAPI默认的异常处理器不会主动添加CORS头，需要自定义处理器捕获所有异常，手动注入CORS头后返回错误信息。

示例代码：

from fastapi import Request, status
from fastapi.responses import JSONResponse
from fastapi.exceptions import RequestValidationError
from starlette.exceptions import HTTPException as StarletteHTTPException

# 捕获所有通用异常
@app.exception_handler(Exception)
async def global_exception_handler(request: Request, exc: Exception):
    # 匹配你的CORS配置添加响应头
    cors_headers = {
        "Access-Control-Allow-Origin": "你的React域名",
        "Access-Control-Allow-Credentials": "true"
    }
    return JSONResponse(
        status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
        content={"detail": str(exc)},
        headers=cors_headers
    )

# 处理FastAPI自带的HTTP异常
@app.exception_handler(StarletteHTTPException)
async def http_exception_handler(request: Request, exc: StarletteHTTPException):
    cors_headers = {
        "Access-Control-Allow-Origin": "你的React域名",
        "Access-Control-Allow-Credentials": "true"
    }
    return JSONResponse(
        status_code=exc.status_code,
        content={"detail": exc.detail},
        headers=cors_headers
    )

# 处理请求参数验证错误
@app.exception_handler(RequestValidationError)
async def validation_exception_handler(request: Request, exc: RequestValidationError):
    cors_headers = {
        "Access-Control-Allow-Origin": "你的React域名",
        "Access-Control-Allow-Credentials": "true"
    }
    return JSONResponse(
        status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
        content={"detail": exc.errors()},
        headers=cors_headers
    )

3. 检查反向代理配置（如Nginx） #

如果用Nginx做反向代理转发React和FastAPI请求，需要确保Nginx在后端返回错误状态码时，仍然返回CORS头。

示例Nginx配置：

server {
    listen 80;
    server_name your-domain.com;

    # React静态资源
    location / {
        root /path/to/react/build;
        try_files $uri $uri/ /index.html;
    }

    # FastAPI接口
    location /api {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        
        # 关键：用always确保错误响应也带CORS头
        add_header Access-Control-Allow-Origin "你的React域名" always;
        add_header Access-Control-Allow-Credentials "true" always;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
        add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;

        # 预请求直接返回204
        if ($request_method = OPTIONS) {
            return 204;
        }
    }
}

4. 前端请求错误处理优化 #

在React的请求逻辑中，区分网络错误和HTTP错误，确保能获取到后端返回的真实错误信息：

示例代码（用fetch）：

async function fetchData() {
    try {
        const response = await fetch('/api/test');
        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.detail || `请求失败：${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (err) {
        // 现在可以打印真实错误信息
        console.error('真实错误：', err.message);
    }
}

内容的提问来源于stack exchange，提问作者NFeruch - FreePalestine