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

Question

这是我的开发设置：

• create-react-app我使用docker 内部创建了一个 React 项目
• npm start我在我的docker-compose.yml文件中使用通常的方式提供它
• 现在可以在我的本地主机上使用它进行访问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
(anonymous) @ main.chunk.js:1
webpackHotDevClient.js:76 开发服务器有已断开连接。
如有必要，请刷新页面。

我该如何解决这个问题？

Answer 1

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

\n

\n

...包括 \xe2\x80\x9cUpgrade\xe2\x80\x9d 和 \xe2\x80\x9cConnection\xe2\x80\x9d 的逐跳标头不会从客户端传递到代理服务器，因此为了代理服务器要了解 client\xe2\x80\x99 将协议切换到 WebSocket 的意图，必须显式传递这些标头：

\n

\n

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

\n\n

他们建议做的时间长一点。

\n

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

\n

upstream front {\n    server localhost:3000;\n}\n\nmap $http_upgrade $connection_upgrade {\n    default upgrade;\n    \'\' close;\n}\n\nserver {\n    listen 80;\n    server_name domain.local;\n    return 301 https://$server_name$request_uri;\n}\n\nserver {\n    listen 443 ssl;\n    server_name domain.local;\n\n    ssl_certificate /Temp/Project/Certificate.pem;\n    ssl_certificate_key /Temp/Project/Key.pem;\n\n    location / {\n        proxy_pass http://front;\n    }\n\n    location /sockjs-node {\n        proxy_pass http://front;\n        proxy_http_version 1.1;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection $connection_upgrade;\n        proxy_set_header Host $host;\n    }\n}\n

\n

不过，还没有使用证书检查您的示例。

\n