nginx 反向代理后的 create-react-app 代碼更改未在瀏覽器中重新加載

Question

我安裝了新的 CRA 模板，但無法在瀏覽器中看到文件更改。 我使用未修改的 CRA 安裝通過 nginx 反向代理 React 應用程序（除了 setting.env VAR PORT 對應於標准 nginx websocket 代理配置之外未修改）。 我仍然看到持續的瀏覽器錯誤：

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 或任何形式的熱重載，只是希望代碼更改能夠在瀏覽器中更新。 我正在嘗試不同的平台，我得到了幾乎相同的 nginx 默認配置 angular 和開箱即用的 Vue 應用程序，所以我猜 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;
}