node.js - 无法使用 Nginx 反向代理 React + Node + PM2 获取等

Question

在为 React 应用程序和 Node Web 服务器设置 Nginx 反向代理时，它似乎在后端破坏了 Express，尽管我可以告诉我正在浏览器中访问它，在添加第二个位置 block 后收到“无法获取 XX”消息(之前在访问 API 端点时浏览器只是白色的，因为 React Router 试图抓取它们)。

配置如下，其中端口 3000 是我的 React 应用程序，端口 4000 是我的 Express 服务器，两者均由 pm2 管理:

server {
        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;
         server_name www.mywebsite.com; # managed by Certbot


        location / {
                proxy_pass http://127.0.0.1:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

        location /api/ {
                proxy_pass http://127.0.0.1:4000/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

}

简单的 Express 路线不起作用(“无法获取/”):

app.get('/', (req, res) => {
        res.send('Hello, world!');
});

还有一些额外的 certbot 内容是为 SSL 生成的，但我不确定它是否相关。 React 应用程序工作完美，但无论是“location/api/”还是“location/api”，也无论我如何在 Express 中命名我的路线，尽管之前工作得很好，但它们都无法解析。预先感谢您的任何指导!

编辑:我更改了服务器配置，至少将/api/映射到服务器的根目录，并带有尾随反斜杠，这样我就不必将/api 添加到每个路由处理程序中，但问题仍然存在(“无法获取/”)。

Answer 1

为什么使用以下 header ？

            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';

如果您使用 TLS/https，则可能不需要，并且如果升级 header 存在，可能会导致 Express 出现问题。尝试删除它。

这些 header 通常用于 WebSocket。请参阅the nginx docs了解更多详情。