nginx 反向代理后面的 create-react-app 代码更改未在浏览器中重新加载

Question

我安装了新的 CRA 模板，但无法在浏览器中看到文件更改的反映。我使用未修改的 CRA 安装通过 nginx 反向代理 React 应用程序（除了设置与标准 nginx websocket 代理配置相对应的 .env VAR PORT 之外，未进行修改）。我仍然看到持续存在的浏览器错误：

webpackHotDevClient.js:60 WebSocket connection to 'wss://react.syntapse.co.uk/sockjs-node' failed: Error during WebSocket handshake: Unexpected response code: 301

.env 文件

PORT=3121

nginx配置

server {
    listen 80;
    server_name react.syntapse.co.uk;

    location /sockjs-node/ {
        proxy_pass http://0.0.0.0:3121/sockjs-node/;
        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 / {
        proxy_pass http://0.0.0.0:3121/;
        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;
    }
}

我没有采取任何具体步骤来启用 HMR 或任何形式的热重载，只是期望代码更改在浏览器中更新。我正在尝试不同的平台，对于默认的 Angular 和 vue 应用程序，我得到了几乎相同的 nginx 配置，这些应用程序可以直接与 HMR 一起使用，所以我猜 React 配置需要调整才能通过代理使用，但文档有点稀疏。

非常感谢任何关于将 React 与 nginx 反向代理结合使用的帮助或见解。

谢谢

Answer 1

始终在众目睽睽之下回答！删除末尾的斜线。

location /sockjs-node {
    proxy_pass http://0.0.0.0:3121/sockjs-node;
    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;
}