Teams中从Adaptive Card启动嵌入Web视图Task Module加载失败问题

1. 检查Task Module的URL完整性 #

确保返回的TaskModuleTaskInfo中URL是完整的HTTPS地址，必须包含https://协议头，比如https://xxxx.ngrok.io/your-page，不能省略协议或写错端口。

2. 配置正确的CORS规则 #

Teams客户端加载Task Module时会发起跨域请求，需确保本地服务（ngrok指向的服务）配置CORS，允许Teams相关域名访问。Java服务可添加CORS过滤器：

@Bean
public CorsFilter corsFilter() {
    CorsConfiguration config = new CorsConfiguration();
    config.addAllowedOrigin("https://teams.microsoft.com");
    config.addAllowedOrigin("https://teams.live.com");
    config.addAllowedMethod("*");
    config.addAllowedHeader("*");
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}

3. 显式设置Task Module尺寸 #

未指定合理宽高可能导致加载异常，需在TaskModuleTaskInfo中显式配置：

TaskModuleTaskInfo taskInfo = new TaskModuleTaskInfo()
    .withUrl("https://xxxx.ngrok.io/your-page")
    .withWidth("medium")
    .withHeight("medium");

4. 校验Adaptive Card inlineAction配置 #

确保Action.Submit的data字段包含正确的Task Module触发参数，示例片段：

{
  "type": "Input.Text",
  "id": "inputText",
  "inlineAction": {
    "type": "Action.Submit",
    "title": "Open Task Module",
    "data": {
      "msteams": {
        "task": {
          "type": "task/fetch"
        }
      }
    }
  }
}

确认task/fetch类型拼写无误。

5. 更新Teams应用清单validDomains #

在Teams应用的manifest.json中，将ngrok域名添加到validDomains数组：

"validDomains": ["xxxx.ngrok.io"]

该配置是Teams客户端允许加载外部页面的必要条件，composeExtensions场景的域名验证逻辑与Adaptive Card触发的Task Module不同，需单独配置。

6. 重启ngrok会话 #

ngrok会话可能因超时等原因异常，即使浏览器能访问，Teams请求仍可能失败。重启ngrok生成新域名，同步更新机器人返回的URL和清单中的validDomains后重新测试。

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