解决Visual Studio 2022中Blazor WASM项目Dev Tunnels启动报错问题

可行解决方案 #

1. 核对Dev Tunnel配置 #

• 确认创建的隧道类型为Public（公开），Private或Organization类型仅允许同账户登录设备访问，移动设备未登录同一账户会无法连接；公开类型支持任意设备通过链接访问。
• 检查隧道协议设置，确保同时启用HTTPS和WebSocket（wss），Blazor WASM调试依赖WebSocket连接。

2. 调整VS调试启动设置 #

• 右键项目 → 属性 → 调试 → 启动设置：
  • 将“启动浏览器”设为不启动浏览器，避免VS尝试打开本地浏览器访问隧道链接触发错误。
  • 把“应用URL”改为Dev Tunnel生成的HTTPS公共地址（不要用本地https://localhost:xxxx）。
• 手动复制Dev Tunnel的公共访问链接（格式类似https://xxxx-xxxx-xxxx-xxxx.devtunnels.ms），在移动设备浏览器中打开即可访问。

3. 确保WebSocket连接权限 #

• 检查Windows防火墙设置，允许Visual Studio和ASP.NET Core应用通过防火墙接收WebSocket连接。
• 若当前使用代理或VPN，暂时关闭后重试，代理可能拦截WebSocket请求导致连接失败。

4. 更新VS及相关组件 #

• 把Visual Studio 2022升级到最新版本（17.5.1之后的更新修复了多个Dev Tunnels兼容性问题）。
• 确认已安装ASP.NET Core 7.0 Runtime及对应版本的WebAssembly Build Tools（当前安装的是.NET 6工具，需补充.NET 7的相关工具）。

5. 重置Dev Tunnel配置 #

• 删除现有隧道后重新创建：
  1. 在VS的“Dev Tunnels”面板中，右键现有隧道选择“删除”。
  2. 点击“创建隧道”，选择Public类型，设置对应项目调试端口的映射。
  3. 重启调试，复制新隧道链接到移动设备访问。

6. 检查SignalR配置（若应用使用） #

• 若Blazor项目用到SignalR，确保Program.cs中Hub URL指向Dev Tunnel公共地址，而非本地localhost：

  builder.Services.AddSignalR().AddHubConnectionBuilder()
      .WithUrl("https://xxxx-xxxx-xxxx-xxxx.devtunnels.ms/hub");
  

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