如何配置Azure静态Web应用(SWA)以支持与关联的App Service API中的SignalR正常协同工作？

我之前也碰到过几乎一模一样的问题——SWA关联App Service后普通API转发正常，但SignalR每隔几十秒就断连，折腾了好一阵才找到根源。核心问题是SWA默认的路由规则没适配WebSocket的特殊请求逻辑，加上超时配置没跟上，咱们一步步来解决：

1. 给SWA添加WebSocket专属转发规则 #

SWA默认只处理普通HTTP请求，不会自动转发WebSocket的升级请求，得在项目根目录的staticwebapp.config.json里手动配置规则，确保WebSocket请求能完整转发到App Service。

示例配置：

{
  "routes": [
    // 优先处理SignalR Hub的WebSocket请求
    {
      "route": "/api/hub/*",
      "methods": ["GET", "POST"],
      "allowedHeaders": ["Upgrade", "Connection", "Authorization"],
      "forwarding": {
        "kind": "proxy",
        "destination": "https://你的API应用服务域名.azurewebsites.net/hub/{*path}"
      }
    },
    // 保留原有的普通API转发规则
    {
      "route": "/api/*",
      "forwarding": {
        "kind": "proxy",
        "destination": "https://你的API应用服务域名.azurewebsites.net/{*path}"
      }
    }
  ],
  "globalHeaders": {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Authorization, Upgrade, Connection"
  },
  "websockets": {
    "enabled": true,
    "idleTimeoutSeconds": 300 // 调大超时时间，默认45秒刚好是你碰到的断连间隔
  }
}

这里要重点注意：

• 单独给SignalR Hub路径（比如/api/hub）配置转发，必须允许Upgrade和Connection这两个WebSocket核心请求头
• 开启websockets.enabled并调大空闲超时，避免因为SWA的默认超时强制断开连接

2. 确认App Service的WebSocket与SignalR配置 #

启用WebSocket支持 #

打开Azure门户的App Service页面，进入「配置」→「常规设置」，找到「WebSocket」选项，设置为「启用」后保存配置。

调整SignalR跨域与超时 #

在你的API项目中，确保SignalR允许SWA域名的跨域请求（以.NET为例）：

services.AddSignalR()
    .AddAzureSignalR(); // 如果使用了Azure托管SignalR服务的话

app.UseCors(policy =>
{
    policy.WithOrigins("https://你的SWA域名.azurestaticapps.net") // 替换成你的SWA实际域名
          .AllowAnyHeader()
          .AllowAnyMethod()
          .AllowCredentials();
});

同时可以在appsettings.json里调整SignalR的超时参数，避免服务端主动断开：

{
  "Azure:SignalR:ServerTimeout": "00:05:00",
  "Azure:SignalR:KeepAliveInterval": "00:00:10"
}

3. 调整Angular客户端的SignalR连接配置 #

把SignalR的连接URL改成SWA的路径，建议用相对路径更灵活，同时确保客户端优先使用WebSocket传输并开启自动重连：

import { HubConnectionBuilder } from '@microsoft/signalr';

const connection = new HubConnectionBuilder()
  .withUrl('/api/hub', {
    skipNegotiation: false,
    transport: ['WebSockets', 'LongPolling'] // 优先WebSocket，失败自动降级长轮询
  })
  .withAutomaticReconnect() // 开启自动重连，不用手动处理断连逻辑
  .build();

4. 测试验证 #

部署完配置后，打开浏览器DevTools的「Network」标签，筛选「WS」类型，查看SignalR的WebSocket连接是否成功建立（状态码应为101 Switching Protocols），同时观察连接是否能持续保持，不再每隔45秒断开。如果还有问题，可以查看Console里的错误提示，或者App Service的日志排查WebSocket请求的转发异常。

备注：内容来源于stack exchange，提问作者adam0101