Node.js 我的CRUD应用程序可以在本地运行，但不能在Heroku上运行

我已经创建了一个CRUD应用程序，它可以在本地运行，但我无法让它在heroku上正常运行。它部署正确，网站似乎正常工作，但我无法从数据库中获取所需的项目，因为它一直说连接被拒绝。 我向Heroku添加了.env变量，并将端口设置为

process.env.port | 5000

和

app.listen（port）

，我不确定是什么导致了错误。我还有一个带有web:

node server.js

的Procfile，以及package.json中指向server.js的“start”脚本。服务器似乎根本没有启动。

---

这里是回购协议，以防您想看一看，这里是heroku上的应用程序。问题在于，您的应用程序有一个后端（服务器）和一个前端（客户端），在本地提供的服务与heroku上的不同。

我假设您的客户端在本地运行在

localhost:3000

（因为这是您启动的createreact应用程序的默认设置）。 当您的后端在

localhost:5000

上运行时，您的客户端的package.json包含以下行以使其在本地工作：

"proxy": "http://localhost:5000",

如果我访问你应用程序的此页面：>boardgames， 然后我在浏览器控制台上面对这些错误：

boardgames-list.jsx:18

Error: Network Error
    at e.exports (createError.js:16)
    at XMLHttpRequest.p.onerror (xhr.js:83)

它告诉您，您的生产版本仍然在

localhost:5000

上调用后端

I.）首先，我会尝试通过更改相对URL来修复这些抓取。

例如，上述示例（）

❌ 当前脚本已硬编码本地主机获取：

useffect（（）=>{
axios
.get（'http://localhost:5000/boardgames/')
。然后（（响应）=>{
setBoardgames（response.data）；
设置加载（假）；
})
.catch（（err）=>console.log（err））；
}, []);

✔️ 通过删除“”，使其相对于根：

useffect（（）=>{
axios
.get（“/boardgames/”）
。然后（（响应）=>{
setBoardgames（response.data）；
设置加载（假）；
})
.catch（（err）=>console.log（err））；
}, []);

它会对Heroku起作用。万一不行，请看下面我的建议

第二，一个建议： 现在，您的路由使用以下后端端点获取数据：

区别只是最后一个斜杠（“/”）字符，这可能会造成混淆，并在以后导致更多问题！ 最佳做法是向后端端点添加差异化路径元素，如

/api/

。例如：

https://boardgamenerd.herokuapp.com/api/boardgames

因此，您可以一目了然地确定哪个

请求与后端相关，哪个与客户端相关

如果使用此解决方案，则需要将以下内容添加到
server.js
：

app.use（express.static（path.join（\uu dirname，'client'，'build'））
//要求在heroku生产上为SPA提供服务，且无路由问题；它将只跳过“api”调用
if（process.env.NODE_env===‘生产’）{
app.get（/^（（？！（api）））*$/，（req，res）=>{
res.sendFile（path.join（uu dirname，'client/build'，'index.html'））
})
}

/^（（？！（api））*$/
regex跳过路径中包含“api”的URL，因此，它们不会作为客户端/构建文件夹的内容静态提供-api调用不会从静态提供，并且可以正常工作。
您是否验证了您实际上正在尝试连接到正确的数据库服务器？您可以尝试从本地连接到远程db服务器吗？当我在VS代码中本地运行“node server.js”时，我会得到两个console.log，一个来自
connection.once（打开，（）=>console.log（“连接到数据库”）
，另一个来自
app.listen（端口，（）=>console.log（“服务器正在运行：${port}”）
。后者显示控制台中的端口5000。因此，是的，我想我可以从本地连接。欢迎使用Stack Overflow。请阅读。问题必须是独立的；我们不会离开现场深入研究代码以查找问题。请将相关信息直接输入您的问题。非常感谢您的代表我知道问题可能出在“硬编码”上获取路径，但我不知道如何使它们相对。然而，现在我面临两个新问题。第一个问题是，当我添加区分符路径时，我下载并显示项目的页面变为空白。我想这是因为我必须在某处编辑路径添加/api，但我不知道具体位置（无论是单路由还是server.js）。第二点是，当我尝试添加/删除或编辑数据库中的某个项目时，网站的行为异常，显示了数据库中的原始数据。是的，一旦（I）你需要在server.js中更改端点，例如：
app.use（'/api/boardgames'，boardgamesruer）；
以及（II）不要忘记在React组件的获取中获取这些新端点上的数据，例如：
axios.get（'/api/boardgames/'）
。这是在后端端点路径中使用
/api/
的两个关键点。它可能需要对后端路由进行微调，您可能需要重构到其他一些express中间件才能正常工作（expressjs.com/en/guide/using middleware.html）。编辑：我修复了示例中的路径和打字错误。@thomyrke您能够修复路径吗？是的，我修复了。我正在处理您建议的片段，因为它是一个中间件，而没有编辑我的app.get（“*”）行。然后我意识到这段代码基本上是一个有条件的应用程序。get和我粘贴到了正确的位置。现在我认为一切都正常工作，我非常感谢你的帮助。很高兴听到你这么说，我很高兴它能帮到我。
xhr.js:178

GET http://localhost:5000/boardgames/ net::ERR_CONNECTION_REFUSED