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

如何解决代理问题 ENOTFOUND Create-React-App Http-Proxy-Middleware Express

在开发过程中将我的客户端请求从 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)

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

感谢任何帮助！

解决方法

我想我已经将问题缩小到硬件上。

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

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

,

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