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

Question

我创建了一个小型 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 策略阻止：没有“访问控制允许源”请求的资源上存在标头。

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

Answer 1

将 CORS-Anywhere 代码库克隆到我们的 PC 上

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

作为一名开发人员，总是很高兴感谢其他开发人员的努力，他们通过向他们的方向发送某种形式的支持来提供使我们的生活更轻松的解决方案，因此，如果有帮助，请为 CORS-Anywhere 存储库投一颗星你解决你的问题。

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

git 克隆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