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

【问题标题】：create-react-app code changes behind nginx reverse proxy not reloading in browsernginx反向代理后面的create-react-app代码更改未在浏览器中重新加载
【发布时间】：2020-07-28 12:30:10
【问题描述】：

我安装了新的 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 反向代理一起使用的帮助或见解。

谢谢

【问题讨论】：

标签： javascript reactjs nginx webpack-hmr

【解决方案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;
}

【讨论】：