时间戳

首页 > 解决方案 > 未处理的拒绝（TypeError）：尝试从rest api获取数据以做出反应时无法获取错误

reactjs - 未处理的拒绝（TypeError）：尝试从rest api获取数据以做出反应时无法获取错误

问题描述

我正在构建一个应用程序，其中烧瓶休息 API 采用两个字符串并给出一个浮点值作为预测。现在我正在尝试连接到反应应用程序，以便可以在网页上显示预测。

下面是用于在 react app 中获取其余 API 预测的代码。

function App() {
  useEffect(() => {
    fetch(
      "https://flask-api-test1.herokuapp.com/predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O"
    )
      .then((resp) => {
        if (resp.status == 200) {
          return resp.json();
        }
      })
      .then((data) => {
        console.log(data);
      });
  }, []);

在 fetch /predict?solute=CC(C)(C)Br&solvent=CC(C)(C)Ohere中solute=CC(C)(C)Br，solvent=CC(C)(C)O是 flask rest API 的输入以提供预测。

当我尝试使用上面的代码在控制台中输出结果时，出现以下错误

在此处输入图像描述

标签： reactjsrestreact-hooksfetchflask-restful

解决方案

您面临的问题是 CORS（跨域资源共享）问题。当您有单独的后端（您的 Flask API）和前端（您的 React SPA）时，对后端的请求来自与 API 不同的来源。可以想象，允许来自任何来源的请求到您的 API 可能会产生一些漏洞，因此默认行为是不允许跨来源请求。你可以在这里阅读更多关于它的信息。

通过使用诸如Flask-CORS之类的 Flask 扩展，您将能够为您的 API 定义一个 CORS 策略，该策略将允许所有来源（使用通配符 - *），或者您可以指定允许哪些来源，在某些情况下哪些端点具有哪些 CORS 策略。实际实现将根据您的框架和您使用的包/扩展而有所不同，但大多数包/扩展都可以轻松地将简单的 CORS 策略应用于您的 API。

推荐阅读