React应用二次渲染时FastAPI后端出现CORS策略错误

开发React前端展示FastAPI后端的数据图表，通过下拉组件切换请求的月份和年份。初始渲染时请求正常，图表可正常显示；但切换下拉框后，浏览器控制台出现如下CORS错误：

从源地址 'http://localhost:3000' 访问 'https://fake-url.com/endpoint/' 被CORS策略阻止：预检请求的响应未通过访问控制检查：请求的资源上不存在 'Access-Control-Allow-Origin' 头。如果不透明响应能满足需求，请将请求的mode设置为 'no-cors' 以禁用CORS获取资源。

React请求代码片段 #

const [month, setMonth] = useState(1);
const [year, setYear] = useState('2023');
const [revenueData, setRevenueData] = useState({});

useEffect(() => {
    const inputs = {
        "month": month,
        "year": year,
        "duration": 1
    }

    const myHeaders = new Headers();
    myHeaders.append("X-API-KEY", "fake-api-key");
    myHeaders.append("Content-Type", "application/json");

    const requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: JSON.stringify(inputs),
        redirect: 'follow'
    };

    fetch("https://fake-url.com/endpoint/", requestOptions)
        .then(response => response.json())
        .then(data => {
            setRevenueData(data)
        }).catch(error => {
            console.log('error', error)
       });
}, [month, year]);

FastAPI CORS配置 #

app.add_middleware(HTTPSRedirectMiddleware)

app.add_middleware(
    CORSMiddleware,
    allow_origins=['*'],
    allow_methods=['*'],
    allow_headers=['*']
)

已通过Postman测试OPTIONS预检请求，后端能正常返回access-control相关响应头。

更新：
浏览器网络面板显示第二次请求的预检成功，但最终返回Internal Server Error（内部服务器错误）——此时浏览器会将后端500错误伪装成CORS错误提示。

排查与解决步骤 #

1. 优先定位后端500错误
   查看FastAPI后端日志，检查切换参数后的请求触发的异常：比如参数格式不匹配（比如month传了字符串、year格式不符合后端预期）、数据库查询失败、业务逻辑中存在未捕获的异常等。初始请求参数能正常响应，说明切换后的参数才是问题触发点。
2. 修复后端异常后验证CORS
   当后端修复500错误，正常返回响应时，CORSMiddleware会自动添加Access-Control-Allow-Origin等头，浏览器的CORS错误提示会自动消失。
3. 前端优化错误处理逻辑
   在fetch响应处理中先判断状态是否正常，避免直接解析错误响应的JSON：

   fetch("https://fake-url.com/endpoint/", requestOptions)
       .then(response => {
           if (!response.ok) {
               throw new Error(`请求失败，状态码：${response.status}`);
           }
           return response.json();
       })
       .then(data => setRevenueData(data))
       .catch(error => console.log('请求错误:', error));
   

4. 确认中间件顺序
   FastAPI中间件按添加顺序执行，当前HTTPSRedirectMiddleware放在CORSMiddleware之前的顺序是正确的，能确保重定向后的请求也应用CORS规则。

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