部署至Azure WebApp后WebSocket连接失败（错误码1006）求助

一、检查Azure WebApp的WebSocket开关 #

• 登录Azure门户，找到你的Django容器化WebApp，进入配置 > 通用设置，确认Web套接字选项已开启。默认状态下该选项是关闭的，Azure会直接拦截WebSocket请求，必须手动开启。
• 若React所在的Node.js WebApp配置了反向代理，同样要确保其Web套接字支持已开启。

二、验证Django服务器的WebSocket端点可用性 #

• 用curl命令测试Django的WebSocket握手是否正常：

  curl -i -N -H "Connection: Upgrade" -H "Upgrade: websocket" -H "Sec-WebSocket-Key: SGVsbG8sIHdvcmxkIQ==" -H "Sec-WebSocket-Version: 13" wss://myDjangoApp.azurewebsites.net/my/ws/url
  

  如果返回101 Switching Protocols，说明服务器端WebSocket配置正常；否则检查Django的ASGI服务器（如Daphne）配置，以及容器端口是否正确暴露。

三、配置正确的CORS策略 #

• 进入Django WebApp的配置 > CORS，将React所在WebApp的域名（如https://myReactApp.azurewebsites.net）添加到允许的源列表中。
• 确保Django的CORS配置允许WebSocket握手必需的请求头：Upgrade、Connection、Sec-WebSocket-Key、Sec-WebSocket-Version。

四、处理Azure的协议转发问题 #

• Azure WebApp会将外部的wss请求转换为内部http请求，Django需要识别转发的协议头，在settings.py中添加：

  SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
  

• 同时确保ASGI服务器（如Daphne）配置信任X-Forwarded-*系列请求头，避免因协议识别错误导致握手失败。

五、完善前端错误排查逻辑 #

• 在WebSocket代码中添加错误回调，捕获详细错误信息：

  socket.onerror = (error) => {
    console.error('WebSocket错误详情: ', error);
  };
  

• 部署后打开浏览器控制台，查看Network标签中WebSocket请求的握手响应状态码（如4xx/5xx），这能快速定位问题根源。

六、确认容器端口映射配置 #

• 若Django为容器化部署，检查WebApp的容器设置，确保容器暴露的端口与Azure配置的目标端口一致（比如Daphne默认用8000端口，需同步设置），否则请求无法到达容器内的WebSocket服务。

内容的提问来源于stack exchange，提问作者dario