时间戳

首页 > 解决方案 > 从 React 应用程序调用 heroku API，错误 200

reactjs - 从 React 应用程序调用 heroku API，错误 200

问题描述

我创建了一个小 API，用于抓取火车到达/出发的网页。我将它托管在 Heroku 上，当我访问页面时：https ://sl-scraper.herokuapp.com/fromstockholm我可以看到我期望的 JSON 响应。它看起来像这样：在此处输入图像描述

到目前为止一切都很好。现在我希望在我的 React 应用程序中获取这些数据，以便以更好的方式显示它。这是我遇到问题的地方。我试图以两种方式获取信息，两种方式都会导致同样的问题。

这是第一次尝试：

React.useEffect(function(){
    axios.get("https://sl-scraper.herokuapp.com/fromstockholm")
    .then(response =>{
      console.log(response);
    })
    .catch(err => console.log(err));
  },[]);

这是第二次尝试：

React.useEffect(()=>{
    fetch("https://sl-scraper.herokuapp.com/fromstockholm")
    .then(response => {
      return response.json();
    })
    .then(data => {
      console.log(data);
    })
    .catch(error => console.log(error));
  },[]);

当我检查日志时，这两种尝试都会导致此问题：

从源“http://localhost:3000”访问“https://sl-scraper.herokuapp.com/fromstockholm”的 XMLHttpRequest 已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头在请求的资源上。

在此处输入图像描述

有谁知道我为什么会收到这些错误？非常感谢你。

标签： reactjsherokuaxioscorsfetch

解决方案

将 CORS-Anywhere 存储库克隆到我们的 PC

我们已经设置好环境，我们可以继续将CORS-Anywhere 存储库克隆到我们 PC 上的选定目标中。

作为开发人员，总是很高兴感谢其他开发人员的努力，他们通过向他们的方向发送某种形式的支持来提供使我们的生活更轻松的解决方案，所以如果它可以帮助您解决问题。

首先，我们将在要在本地放置 CORS-Anywhere 服务器的本地存储目录中打开终端并运行 git 命令：

git clone https://github.com/Rob--W/cors-anywhere/

克隆完成后，我们必须通过在终端上运行命令npm install来安装该项目所依赖的所有包：

npm 安装

之后部署您的 heroku 应用程序。

参考：https ://dev.to/imiebogodson/fixing-the-cors-error-by-hosting-your-own-proxy-on-heroku-3lcb

推荐阅读