React 无法从本地主机上的烧瓶 API 获取 api 数据

Question

我有一个非常简单的 React 应用程序，我试图在其中对托管在 localhost:5000 上的 Flask API 进行 api 调用。这是 fetch 方法：

   //Fetch all forms from database
    useEffect(() =>{
      setIsLoading(true);
      fetch('/api/forms').then(response =>{
        if(response.ok){
          return response.json();
        }
      }).then(data => console.log(data));
    }, []);

我还在我的 package.json 中添加了这一行，很多人推荐： "proxy": "http://localhost:5000/",。

我也尝试过fetch('http://MY-IPV4-ADDRESS:5000/forms') 和fetch('localhost:5000/forms')，但没有成功。

浏览器控制台中的错误只是显示“加载资源失败：net::ERR_CONNECTION_REFUSED”

如果我只是打开一个网络浏览器并导航到localhost:5000/forms，我会得到正确的响应，包括所有表单数据。

然后我尝试了fetch('http://127.0.0.1:5000/forms')，它给了我来自 API 的 200 响应，这通常意味着它成功，但在浏览器控制台中显示“访问 'http://127.0.0.1:5000/forms' 获取来自来源“http://localhost:3000”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“否” -cors' 来获取禁用 CORS 的资源。”

我还有一个 React Native 应用程序，它可以像这样进行相同的 api 调用：

  //Fetch all formsfrom database
  useEffect(() =>{
    setIsLoading(true);
    fetch('http://10.0.2.2:5000/forms').then(response =>{
      if(response.ok){
        return response.json();
      }
    }).then(data => setFullData(data)).then(setIsLoading(false));
  }, []);

尽管这在 React Native 应用程序中运行良好，但我尝试过但无济于事。

这是项目的文件结构，只是为了让您了解所有内容的位置：

我做错了什么？

Answer 1

您是否尝试捕捉错误？

fetch().then().catch(err => console.log(err))

Answer 2

根据更新的信息，我认为问题可能不在反应或获取中。你应该修复 cors-problem。在这里你可以阅读about cors and possible solutions or here 或者你应该配置烧瓶安全性。我不使用 pyton，但在春天我不得不修改安全配置。

Answer 3

我想通了。我下载了这个包并完全按照说明进行操作，现在一切都很好。 https://flask-cors.readthedocs.io/en/latest/