使用 Nginx 和 Docker 向 CRA 开发服务器使用 proxy_pass 时出现 Websocket 错误答案

【问题标题】：Websocket error when using a proxy_pass to CRA development server using Nginx and Docker使用 Nginx 和 Docker 向 CRA 开发服务器使用 proxy_pass 时出现 Websocket 错误
【发布时间】：2022-05-13 17:46:43
【问题描述】：

我正在尝试将 Nginx 中的 proxy_pass localhost:3000 连接到我的 React 开发服务器。它目前可以工作，但我在控制台中看到一个错误，我不确定这会导致任何问题：

WebSocketClient.js:16 WebSocket 连接到“ws://localhost/ws”失败：

Nginx.conf：

upstream backend {
    server backend:8000;
}

upstream frontend {
    server frontend:3000;
}

server {
    listen 80;
    
    location / {
        proxy_pass http://frontend$request_uri;
        proxy_set_header Host $http_host;
    }
    
    location /api/ {
        proxy_pass http://backend;
        proxy_set_header Host $http_host;
    }

    location /admin/ {
        proxy_pass http://backend;
        proxy_set_header Host $http_host;
    }
}

我尝试将WDS_SOCKET_PORT=0 添加到前端.env 文件也尝试添加：

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";

...正如其他 SO 帖子中所建议的那样。都没有用。

这是什么错误？我该如何解决？

【问题讨论】：

标签： reactjs docker nginx

【解决方案1】：

我通过在变量中添加更多来解决这个问题

environment:
  - WDS_SOCKET_PORT=443

也许它可以帮助你，但如果你没有代理，请在 docker-compose.yml 中使用 WDS_SOCKET_PORT=0

【讨论】：