React app + heroku 服务器不能在生产环境中工作，但在开发环境中工作正常答案

【问题标题】：React app + heroku server not working on production, but working fine in devReact app + heroku 服务器不能在生产环境中工作，但在开发环境中工作正常
【发布时间】：2021-06-17 21:18:18
【问题描述】：

我正在处理从server 查询的React 应用程序。我已经在heroku 上部署了服务器。当我在dev 中进行测试时，application 的行为符合预期。但是当我在vercel 部署中使用它时，它会因为heroku 服务器没有正确响应而失败。

以下是查询的服务器代码：

app.get(`/allPlans`, async (req, res) => {
    console.log("allPlans() query");
    ret = await Plans.find({});
    f = [];
    for (i = 0; i < ret.length; i++) {
      f.push(ret[i].name);
    }
    console.log(f);
    return res.status(200).send(f);
  });

以下是我使用axios从客户端查询的代码：

const endPoint = "/allPlans";
let ret = await axios.get(endPoint);
console.log(ret.data);

在dev 环境中，当我在localhost:3000 上部署应用程序时，这会返回一个不错的array。

["test","myPlan190","myPlan987"]

但在 vercel 的实际生产中，它返回了以下对象（您可以通过 vercel deployment 在控制台中查看此消息）：

欢迎所有建议。

Github repo

Vercel deployment

Server status

Heroku server query which is failing from axios, but working elsewise

【问题讨论】：

这可能是侦听正确端口的简单案例。你的设置在 5000 上，heroku（我对此不是 100%）是 8080。记得重新启动服务器，并且它可能值得一个 npm run build。
您是说heroku 服务器工作不正常吗？因为server status 恢复正常。
我在 Heroku 上看不到您的 react 应用对后端的任何请求。
查看上面写的axios代码。
是的，我指的是网络控制台。 Heroku 上没有对后端的请求。可能您尝试向前端应用的 URL 发送请求。

标签： reactjs heroku server production vercel

【解决方案1】：

好吧，我检查了您的存储库，还检查了您的 Vercel 部署中的 XHR 请求，据我所知，它只生成了一个，即：

请求网址：https://planner-pcrsehfg3-akcgjc007.vercel.app/allPlans

它没有对服务器进行实际调用。我在 Dashboard.js 中看到您需要包中的 axios。我没有找到任何创建的 axios 实例。因此，在“/allPlans”前面基本上没有什么可以附加的。要么使用正确的 url “https://cryptic-bayou-91116.herokuapp.com” 创建一个 axios 实例，要么通过放置整个 url “https://cryptic-bayou-91116.herokuapp.com/allPlans” 来测试它在axios 中调用Dashboard.js。

以下是 axios 查询的更新代码：

const baseURL = "https://cryptic-bayou-91116.herokuapp.com"
...
const endPoint = baseURL + "/allPlans";
let ret = await axios.get(endPoint);
console.log(ret.data);

【讨论】：

但是，我使用代理来转发这样的请求："proxy": "https://cryptic-bayou-91116.herokuapp.com",
谢谢，这解决了我的问题。尽管我确信为什么它以前不起作用。无论如何，将此标记为解决方案。
好吧，如果你想像现在这样使用 axios，你需要创建一个新文件，比如 instance.js 和 const axios = require("axios");常量实例 = axios.create({baseURL:"cryptic-bayou-91116.herokuapp.com"});导出默认实例；。然后，当您在 Dashboard.js 或其他任何地方使用 axios 时，导入您创建的文件 - './instance' 等。而不是从库中，就像您现在所做的那样：const axios = require("axios");。你可以在这里阅读更多信息：medium.datadriveninvestor.com/…

【解决方案2】：

fHeroku 随机更改应用绑定端口。

您可以通过以下方式设置端口：

const port = process.env.PORT || 3000

在你的应用程序中使用dotenv

或者在 heroku 上编辑 .env 文件。安装Heroku CLI：

heroku login

heroku run bash -a app_name

touch .env

echo "PORT=3000" >> .env

check variable by

cat .env

【讨论】：