从 FastAPI 后端第二次渲染 React 应用程序时发生 CORS 策略错误

Question

我正在开发一个 React 前端来绘制来自 fastapi 后端的一些数据。我正在使用几个下拉组件来更改请求数据的月份和年份。通过初始渲染，获取请求工作正常并返回数据和图表显示。更改下拉菜单后，我会在浏览器控制台中收到以下 CORS 策略错误。

从源“http://localhost:3000”获取“https://fake-url.com/endpoint/”的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否请求的资源上存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

通过 fetch 调用对代码片段做出反应：

 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 中使用 CORSMiddleware，设置如下：

app.add_middleware(HTTPSRedirectMiddleware)

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

我还确认后端是返回用于预检的访问控制标头，并在邮递员中使用选项请求，如下所示：

更新

网络面板显示第二个请求预检成功，但最终因内部服务器错误而失败。这让我想到：

CORS 和内部服务器错误响应

Answer 1

当

请求以错误结束时，即，当返回带有状态代码（如 4xx 或 5xx

）的响应时，CORS

标头不会被添加。

如您提供的屏幕截图所示，当第三次调用

dashboard_data/

API 端点时，服务器返回

500 Internal Server Error

 响应代码，表明服务器遇到意外情况，无法完成请求。因此，在这种情况下，服务器将不会包含适当的 

Access-Control-Allow-Headers

 / 

Access-Control-Allow-Origin

 标头，并且浏览器将在 devtools 控制台中报告 CORS 错误。因此，请首先检查导致服务器端错误的原因并尝试修复它（运行服务器的控制台应该为您提供对此的见解）。

可以在

此处

、此处和此处找到可能对您和未来读者有帮助的CORS问题概念的相关答案。