时间戳

首页 > 解决方案 > Heroku / Node / React - 如何在 heroku 上访问我的节点 API 端点

node.js - Heroku / Node / React - 如何在 heroku 上访问我的节点 API 端点

问题描述

编辑：如果有帮助，我可以共享我的任何一个 package.json 文件。

Edit2：我不知道这是一个常见问题还是一个愚蠢的问题。我知道它不适合 stackoverflow，但我已经在一天的大部分时间里一直在努力解决这个 heroku 部署问题。

我最近按照以下教程向 heroku 发布了一个 react / express 应用程序，虽然我认为我已经成功了，但我对如何访问我的 API 感到困惑。作为参考，本教程中的几个相关步骤是：

  1. 创建 Node / Express API，推送到 heroku，并检查它是否工作（通过转到 URL 中的 api 端点并逐字查看数据），然后将“start”：“node index.js”添加到 Node package.json文件。

  2. 在 Node API 的根目录下创建 React App ，在 react 应用的 package.json 中添加：“proxy”：“ http://localhost:5000 ”（我想这样 API 和应用可以通信。

我已经完成了所有这些步骤，并且我的 React 应用程序正在使用 heroku。该应用程序正在显示，并且由于该应用程序依赖 Node API 来获取要显示的数据，显然 Express/Node API 正在工作。

但是，我想通过在浏览器中访问端点来实际查看节点 API 端点，而我目前无法在 heroku 中执行此操作。所有的 React Routes 都可以工作，但是当我访问 api 路由时，我的屏幕是空白的。关于如何在浏览器中访问我在 heroku 上的 API 端点的任何想法？

例如我的问题：

本地主机节点

本地主机反应

Heroku

所以这是我的问题。一个简单问题的长篇文章 - 为什么当我的节点/快递应用程序推送到 heroku 时我不能访问它的 API 端点，当我可以在http://localhost:8080/api/path/看到数据时到/端点。反应应用程序正在运行，因此它可以正确获取 API 数据，但我希望能够在端点的浏览器中查看数据。

谢谢！

标签： node.jsreactjsheroku

解决方案

因此，有两个问题可能会协同工作，让您感到头疼。

第一个也是更可能的问题是 react-router 正在拦截“/api” url，并过早地决定它没有任何组件可以显示。解决此问题的一种方法是编辑客户端代码中的“代理”属性package.json。

"proxy": {
  "/api": {
    "target": "http://localhost:5000"
  }
}

（☝️ 我在这里假设您保留了教程中的 5000 端口号。如果不将其更改为 8080 或您用于 api 端口号的任何值。）

第二个问题是为您添加的 service worker create-react-app 正在做同样的事情。它读取路径并认为没有什么可服务的。如果您的“/api”路由仍然显示空白页，请在浏览器的开发工具中转到“应用程序”选项卡并单击“清除站点数据”（假设您使用的是 Chrome，不确定如何在其他浏览器中完成此操作) 然后刷新。

如果您不关心服务工作者，registerServiceWorker()请从客户端代码的 index.js 中删除调用。如果您确实需要服务工作者，则需要编辑 registerServiceWorker.js 文件，以便更清楚地了解它如何匹配路径。

希望有帮助！

推荐阅读