Azure静态Web应用与App Service间WebSocket连接故障排查求助

1. 配置静态Web应用的WebSocket代理支持 #

静态Web应用默认的/api代理未启用WebSocket，需在项目根目录的staticwebapp.config.json中添加专属路由配置：

{
  "routes": [
    {
      "route": "/api/socket.io/*",
      "allowedMethods": ["GET", "POST", "OPTIONS"],
      "upstream": "https://<你的App Service域名>.azurewebsites.net/socket.io/*",
      "enableWebSocket": true
    }
  ]
}

替换<你的App Service域名>为实际的App Service地址，确保路由明确指向后端Socket.io路径并开启WebSocket支持。

2. 开启App Service的WebSocket功能 #

登录Azure门户，进入目标App Service：

• 导航至设置 > 配置 > 常规设置
• 找到WebSocket选项，设置为开启
• 保存配置并重启App Service

3. 对齐前后端Socket.io配置 #

前端调整 #

先移除强制指定WebSocket传输的配置，让Socket.io自动协商传输方式，验证连接正常后再尝试强制设置：

const socket = io(socketHost, {
  path: "/api/socket.io",
  withCredentials: true,
  // 先注释以下行，测试自动协商
  // transports: ["websocket"],
});

若必须强制WebSocket，需确保后端路径匹配。

后端配置 #

确保Socket.io服务器的路径与代理后的路径匹配，同时配置正确的跨域规则：

const { Server } = require("socket.io");
const io = new Server(server, {
  path: "/socket.io", // 前端/api代理会映射到此处
  cors: {
    origin: "https://<你的静态Web应用域名>.azurestaticapps.net",
    credentials: true,
    methods: ["GET", "POST", "OPTIONS"]
  }
});

替换<你的静态Web应用域名>为实际的静态Web应用地址。

4. 排查网络拦截因素 #

• 检查App Service的NSG（网络安全组），确保允许443端口的入站/出站流量（WebSocket默认使用HTTPS端口）
• 若使用Azure Front Door或CDN，需确认已开启WebSocket协议支持
• 检查WAF规则，避免WebSocket请求被误拦截

5. 启用日志排查 #

• App Service：开启监控 > 日志流，或配置应用日志存储，查看是否有WebSocket请求到达后端
• 静态Web应用：开启监控 > 日志流，检查代理是否成功转发WebSocket请求

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