node.js - Heroku/Node/React - 如何访问 heroku 上的 Node api 端点

Question

编辑:如果有帮助的话，我可以分享我的 package.json 文件。

Edit2:我不知道这是一个常见问题还是一个愚蠢的问题。我知道它不适合 stackoverflow，但我已经在一天的大部分时间里一直在为这个 heroku 部署而苦苦挣扎。

我最近关注了following tutorial on posting a react / express app to heroku ，虽然我认为我已经成功了，但我对如何访问我的 API 感到困惑。作为引用，本教程中的几个相关步骤是:

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

2. 在 Node API 的根目录内创建 React 应用程序，将以下内容添加到 React 应用程序的 package.json 中:"proxy": "http://localhost:5000 " (我想这样 api 和应用程序就可以通信。

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

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

例如我的问题:

本地主机 Node

• 当我在本地主机上启动 (node index.js) 时，我可以访问我的 Node API 端点 http://localhost:8080/api/path/to/endpoint
• http://localhost:8080/是我的 Node API 的根

本地主机 react

• 当我在本地主机上启动(npm start)时，我可以通过 http://localhost:3000/ 访问我的 React 应用程序根目录
• 我的另一条 react 路由器路由是 http://localhost:3000/myreactpage/ ，这会导致我的 React 应用程序的页面。

赫罗库

• 假设我的 Heroku 应用程序名称是 https://dusty-manager-23562.herokuapp.com/
• https://dusty-manager-23562.herokuapp.com/通向我的 React 应用程序的根目录
• https://dusty-manager-23562.herokuapp.com/myreactpage 确实会引导至我的 React 应用页面
• https://dusty-manager-23562.herokuapp.com/api/path/to/endpoint 不显示我的数据，即使我认为它会/想要查看我的数据。这就是我的问题。

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

谢谢!

Answer 1

因此，有两个问题可能同时出现，导致您感到头痛。

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

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

(☝️这里假设您保留了教程中的 5000 端口号。如果没有，请将其更改为 8080 或您用于 API 端口号的任何端口号。)

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

如果您不关心是否有 Service Worker，请从客户端代码的 index.js 中删除 registerServiceWorker() 调用。如果您确实需要 Service Worker，则需要编辑 registerServiceWorker.js 文件，使其在匹配路径方面更加清晰。

希望有帮助!