Node.js部署的Angular dist包在Azure正常运行但Teams中无法加载

问题描述 #

我已成功创建了一个带SSO功能的Teams应用，现在需要将该本地应用部署到Azure Web App上，因此我按如下方式配置Node.js后端，以部署Angular前端：

app.get('*', function(req, res) {
  res.sendFile(__dirname + '/dist/index.html');
  // load the single view file (angular will handle the page changes on the front-end)
});

该配置在本地测试时运行正常，部署到Azure Web App上后也可正常运行，但我导入应用manifest到Teams中尝试打开对应页面时，系统提示连接被拒绝。

排查与修复方案 #

• 检查Teams应用manifest的有效域名配置
  manifest中的validDomains字段必须包含你Azure Web App的完整域名，不能携带路径，示例配置如下：

"validDomains": [
  "你的Azure Web App域名，如xxx.azurewebsites.net"
]

少了该配置Teams会直接拦截应用请求，触发连接拒绝提示。

• 验证Azure Web App的HTTPS规则
  Teams仅允许加载HTTPS协议的资源，确认你的Web App未配置强制HTTP跳转，SSL证书生效且受信任，没有过期问题。
• 补充Node.js后端CORS配置
  你当前的配置仅处理了静态资源返回，未配置针对Teams客户端的跨域允许头，需要在所有路由前添加如下配置：

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  next();
});

如果你的SSO逻辑有自定义请求头，需要同步加入允许的Headers列表。

• 核对Angular构建配置
  确认Angular打包时的base-href参数和你Azure Web App的部署路径匹配，如果是部署在根路径，保持index.html中的<base href="/">即可，如果部署在子路径，需要对应修改路径配置，避免前端资源加载失败。
• 检查Azure AD应用注册配置
  你之前本地测试用的重定向URI是localhost地址，部署后需要在Azure AD的应用注册中添加Azure Web App对应的重定向URI，否则SSO请求跳转时会被拦截。
• 确认Azure Web App网络规则
  检查Web App的IP访问限制、防火墙配置，确保没有拦截Teams服务的访问IP段，避免请求被Azure侧拦截。

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