CRA 和 nginx 反向代理与“wss”sockjs-node 的 WebSocket 连接失败

Question

这是我的开发设置：

• 我在 docker 内部使用 create-react-app 创建了一个 React 项目
• 我在docker-compose.yml 文件中使用npm start 以通常的方式提供服务
• 现在可以在我的本地主机上使用http://localhost:3000 访问它
• 为了模拟服务器条件，我设置了 nginx 和本地 DNS
• 在/etc/hosts 我添加127.0.0.1 domain.local
• 使用mkcert 我制作了本地有效的证书
• 在nginx我创建如下配置文件：

server {
    listen 80;
    server_name domain.local;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name domain.local;

    ssl_certificate /Temp/Project/Certificate.pem;
    ssl_certificate_key /Temp/Project/Key.pem;

    location / {
        proxy_pass http://localhost:3000;
    }
}

问题是当我转到https://domain.local 而不是http://localhost:3000 时，我失去了热重载，并且我在控制台中看到了这个错误：

webpackHotDevClient.js:60 WebSocket 连接到“wss://domain.local/sockjs-node”失败：
../../Project/node_modules/react-dev-utils/webpackHotDevClient.js @ webpackHotDevClient.js:60
webpack_require @ bootstrap:851
fn@bootstrap:150
1@index.js:7
webpack_require@bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
（匿名）@main.chunk.js:1
webpackHotDevClient.js:76 开发服务器已断开连接。
必要时刷新页面。

我该如何解决这个问题？

Answer 1

我也在使用代理。所以问题是如何在 NGinx 中设置你的 websocket 连接。

... 包括“升级”和“连接”在内的逐跳标头不会从客户端传递到代理服务器，因此为了让代理服务器了解客户端将协议切换到 WebSocket 的意图，这些标头必须显式传递：

location /sockjs-node {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

---

他们recommend doing 有点长。

我在前面的示例中为您放置了localhost:3000，但我更喜欢使用单独的upstream 指令，以免混淆上游和地址。所以完整的例子（在http 指令内）将是：

upstream front {
    server localhost:3000;
}

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

server {
    listen 80;
    server_name domain.local;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name domain.local;

    ssl_certificate /Temp/Project/Certificate.pem;
    ssl_certificate_key /Temp/Project/Key.pem;

    location / {
        proxy_pass http://front;
    }

    location /sockjs-node {
        proxy_pass http://front;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header Host $host;
    }
}

不过，还没有使用 cert`s 检查您的示例。