Azure中React应用调用Function App遇CORS及JWT令牌问题

核心结论 #

这是令牌问题引发的次生CORS错误提示，根源并非CORS配置本身

现象拆解与分析 #

• OPTIONS预检请求返回200，且响应头包含Access-Control-Allow-Origin: *、Access-Control-Allow-Headers: Authorization等正确配置，说明Function App的CORS设置完全生效，不存在跨域配置问题。
• 浏览器显示的CORS错误是401身份验证失败后的次生表现：当实际GET请求返回401时，若响应未携带CORS允许头（或浏览器将身份验证错误关联到跨域场景），会触发这个提示，但本质问题是请求未携带有效令牌。
• 关键证据：实际GET请求的Authorization头仅为Bearer （无令牌内容），直接导致Function App返回Invalid JWT的401错误，这是身份验证失败的明确信号。
• 新B2C租户的关联：创建新租户后出现问题，大概率是前端令牌获取流程或Function App身份验证配置未同步更新，导致无法生成/验证新租户颁发的令牌。

排查与修复步骤 #

• 补全axios请求的令牌注入：当前的axios请求配置未显式设置Authorization头，需确保在请求中添加令牌：

  const response = await axios.request({
    url,
    method,
    [dataOrParams]: data,
    timeout,
    headers: {
      Authorization: `Bearer ${yourValidToken}` // 替换为从B2C获取的有效令牌
    }
  });
  

• 验证B2C令牌获取流程：
  • 检查前端获取令牌的逻辑，确认使用了新B2C租户的正确配置（租户域名、客户端ID、授权策略、权限范围等）。
  • 打开浏览器开发者工具的Network面板，查看令牌获取请求（如/oauth2/v2.0/token）是否成功返回包含access_token的响应。
• 同步Function App的身份验证配置：
  • 确认Function App的B2C身份验证设置已切换到新租户，包括租户ID、用户流/自定义策略名称、应用注册信息等。
• 确保错误响应携带CORS头：在Function App中配置全局错误处理，确保401等错误响应也返回Access-Control-Allow-Origin等CORS头，避免浏览器误判。

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