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

Posted 2023-03-04

【中文标题】从 React 应用程序调用 heroku API，错误 200

【英文标题】：Calling heroku API from React app, error 200

【发布时间】：2021-12-11 18:51:24

【问题描述】：

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

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

【问题讨论】：

我在您的屏幕截图中看到了错误，但仅供参考 HTTP 200 Ok 表示成功，而不是错误。我不确定您在哪里看到 200 响应，但这可能不是问题所在。

@Chris 好的，我将 React 应用程序上传到 Netlify 并尝试运行它。我得到同样的错误..你介意看看最新的答案吗？我在那里更新了它。

【参考方案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

【讨论】：

这会让我只能在本地从 API 获取信息吗？你知道如果我部署这个 React 应用程序会怎样吗？它也会在那里工作吗？ “我们将在要在本地放置 CORS-Anywhere 服务器的本地存储目录中打开我们的终端” - 这是什么意思？我怎么知道要将 CORS-Anywhere 放在哪个目录中？

@Brewsli 这个问题在现场没有发生。不用担心。它发生是因为本地主机。有关更多详细信息，您可以参考我在答案中添加的博客。

实际上我在 Netlify 上托管了我的 React 应用程序，并且发生了同样的错误。我将在新帖子中向您展示。