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

Question

我正在尝试将 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 帖子中所建议的那样。 都没有奏效。

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

Answer 1

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

environment:
  - WDS_SOCKET_PORT=443

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

Answer 2

尝试这个：

environment:
  - WDS_SOCKET_PORT=443

这个对我有用