React连接EC2部署的Python WSS服务器失败问题排查

1. SSL证书有效性问题 #

• 若使用自签名证书，Postman默认会跳过证书验证，但浏览器（React运行在浏览器环境）会严格校验。常见问题包括证书主题备用名称（SAN）不匹配（证书未包含你的域名/IP）、证书链不完整（缺少中间证书），这些都会导致浏览器拒绝连接。
• 排查方式：用浏览器直接访问https://xxx:3500，查看地址栏的安全提示和证书详情，确认SAN覆盖目标地址、证书链完整。自签名证书需在客户端系统或浏览器中手动导入信任；生产环境建议使用Let's Encrypt等正规CA颁发的证书。

2. 服务器SSL配置不兼容浏览器 #

• Python WebSocket服务器的SSL套件配置可能仅支持Postman兼容的旧版协议/套件，而浏览器要求更安全的现代标准（如TLS 1.2+，禁用弱加密算法）。
• 排查方式：检查服务器SSL上下文配置，确保启用TLS 1.2及以上版本，并使用推荐的加密套件。以websockets库为例，正确配置示例：

  import ssl
  ssl_context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
  ssl_context.min_version = ssl.TLSVersion.TLSv1_2
  ssl_context.set_ciphers('ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256')
  ssl_context.load_cert_chain(certfile="fullchain.pem", keyfile="privkey.pem")
  

3. EC2容器网络/代理配置问题 #

• 即便Postman能连接，仍可能存在端口转发、防火墙或反向代理的配置疏漏：
  • 确认EC2安全组允许3500端口的**TCP（HTTPS）**流量入站；
  • 若使用Nginx等反向代理，需确保配置正确处理WebSocket升级请求，需添加：

    location / {
        proxy_pass http://your-websocket-server:3500;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }
    

  • 检查容器内证书文件的路径和权限，确保服务器进程能正常读取证书。

4. 浏览器混合内容限制 #

• 若React项目通过http://访问，而WSS使用wss://，浏览器会阻止“混合内容”（非安全页面加载安全资源）；反之若React为https://，但WSS证书存在问题也会触发限制。
• 排查方式：确保React项目与WSS服务器统一使用HTTPS；开发环境可临时允许浏览器加载混合内容（Chrome可点击地址栏警告图标，选择“允许加载不安全脚本”，但生产环境必须严格统一HTTPS）。

5. 服务器握手逻辑不兼容 #

• 部分Python WebSocket库的WSS握手处理可能存在细节问题，比如未正确处理Sec-WebSocket-Protocol等请求头，Postman可能忽略这些字段，但浏览器会严格发送并校验。
• 排查方式：开启服务器调试日志，对比React客户端与Postman的握手请求头，找出差异后调整服务器的握手逻辑。

内容的提问来源于stack exchange，提问作者Juan Pedro Pont Vergès