代理问题 ENOTFOUND Create-React-App Http-Proxy-Middleware Express答案

【问题标题】：Proxy Issue ENOTFOUND Create-React-App Http-Proxy-Middleware Express代理问题 ENOTFOUND Create-React-App Http-Proxy-Middleware Express
【发布时间】：2021-04-18 07:15:09
【问题描述】：

在开发过程中，当我的客户端请求从 CRA 代理到我的 express API 服务器时，我遇到了一个新问题。

我从 HPM 收到以下错误消息。我可以看到它返回为 504 Gateway Timeout

[HPM] Error occurred while trying to proxy request /api/game/leaderboard from localhost:3000 to http://localhost:5000 (ENOTFOUND) (https://nodejs.org/api/errors.html#errors_common_system_errors)

我使用 setupProxy.js 如下：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = app => {
    console.log('from setupPrxoy.js');
    app.use(
        '/api/**',
        createProxyMiddleware({
            target: 'http://localhost:5000',
            changeOrigin: true,
        })
    );
};

这似乎工作正常，因为我在启动 React 开发服务器时得到以下信息：

[HPM] Proxy created: /  -> http://localhost:5000

这是我的服务器 app.js：

const express = require('express');
const cors = require('cors');
const PORT = process.env.PORT || 5000;
const app = express();

const corsOptions = {
    credentials: true,
};
app.use(cors(corsOptions));

app.use(express.json())
app.use(express.urlencoded({extended: true}))

//ROUTES
require('./routes/currentGame')(app);

app.listen(PORT, () => {
    console.log(`Server started on ${PORT}`);
});

还有那个路由文件：

const db = require('../models');
module.exports = app => {
  app.get('/api/game/leaderboard', async (req, res, next) => {
        try {
            await db.Entry.find({
        gameNumber: 2
      })
                .limit(50)
                .populate('user', 'username')
                .sort({ totalScore: 'descending' })
                .exec((err, entries) => {
                    if (err) {
                        return next(err);
                    } else {
                        const leaderboard = [];
                        entries.forEach(entry => {
                            let newObj = {
                                totalScore: entry.totalScore,
                username: entry.user.username
                            };
              leaderboard.push(newObj);
                        });
            return res.status(200).json(leaderboard);
                    }
                });
        } catch (err) {
            return next(err);
        }
  });
}

API 在客户端工作正常，它按预期返回 JSON。

我尝试回滚到旧版本的 React、React-Dom、React-Scripts 和 HPM，但没有成功。

我尝试删除 HPM 并在客户端的 package.json 中使用一个简单的代理。没用，收到了类似的消息。

所以我知道代理正在工作（我认为）

我查了一下 ENOTFOUND，发现这是某种 DNS 地址错误。

这是我在命令行中得到的结果

node      5033   [mynamewithheld]   23u  IPv4 0x93d5c87aa7d4fbd3      0t0    TCP *:3000 (LISTEN)
node      5035   [mynamewithheld]   23u  IPv6 0x93d5c87aa770a0ab      0t0    TCP *:5000 (LISTEN)

我想知道是否需要对服务器上的 Header Requests 做一些事情，或者端口的运行方式是否不同？

任何帮助表示赞赏！

【问题讨论】：

标签： node.js reactjs express create-react-app http-proxy-middleware

【解决方案1】：

确保 localhost 在您的 etc/hosts 文件中映射到 127.0.0.1。

【讨论】：

【解决方案2】：

我认为我已将问题范围缩小到硬件。

它在运行 OS Sierra 10.12.6 的 2011 iMac 上不起作用，我正在使用它，但在运行 OS Mojave 10.14.16 的 2015 MacBook Air 上进行了测试，它可以工作。

除了知道这是问题所在之外，知道如何修复它以使其在 iMac 上运行吗？

【讨论】：