Question

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

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

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

创建Node / Express API，推送到heroku，检查它是否有效（通过转到URL中的api端点并逐字地查看数据），然后添加“start”：“node index” .js“到Node package.json文件。
在Node API的根目录中创建React App ，添加到react app的package.json中：“proxy”：“http://localhost:5000” （我认为api和app可以通信。

我已经按照所有这些步骤操作了，而我的React App 正在使用在heroku上。该应用程序正在显示，由于应用程序依赖Node API来显示数据，因此Express / Node API显然正在运行。

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

例如我的问题：

Localhost节点

当我在localhost上启动（node index.js）时，我可以在http://localhost:8080/api/path/to/endpoint
访问我的节点API端点
http://localhost:8080/是我的节点API的根

Localhost React

当我在localhost上启动（npm start）时，我可以在http://localhost:3000/
访问我的反应应用根目录
另一个我的反应路由器路由是http://localhost:3000/myreactpage/，这会导致我的反应应用页面。

的Heroku

让我的heroku应用名称为https://dusty-manager-23562.herokuapp.com/

https://dusty-manager-23562.herokuapp.com/指向我的React应用
的根目录
https://dusty-manager-23562.herokuapp.com/myreactpage 会导致我的反应应用页面

https://dusty-manager-23562.herokuapp.com/api/path/to/endpoint 不会显示我的数据，即使我认为它/想要查看我的数据。这就是我的问题。

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

谢谢！

Answer 1

所以有两个问题可能会同时发生，让你头疼。

第一个也是更可能的问题是反应路由器正在拦截＆＃34; / api＆＃34;网址并过早地决定它没有任何组件可以显示给那些人。解决这个问题的方法是编辑＆＃34;代理＆＃34;客户代码中的属性package.json。

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

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

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

如果您不关心拥有服务工作者，请从客户端代码的index.js中删除registerServiceWorker()来电。如果您确实需要服务工作者，则需要编辑registerServiceWorker.js文件，以便更好地了解它与路径的匹配方式。

希望有所帮助！

Answer 2

认为这是相关的帖子 - Accessing internal API with React, Axios on Heroku

我没有使用Axios，但我认为app.get（*）可能会给我一些问题。

编辑：没有，这实际上没有帮助吨...

Heroku / Node / React - 如何在heroku

2 个答案: