调用Calendly API时Authorization头被自有JWT覆盖返回401如何解决？

问题根因 #

你项目中配置了全局Angular HTTP拦截器，会自动为所有请求追加自有应用的JWT Authorization头，你在单次请求中手动设置的头会被拦截器的逻辑后发覆盖，因此实际发出的请求头始终是自有应用的令牌。你提到无JWT配置的新项目可正常调用，也完全符合这个判断。

解决步骤 #

• 第一步：找到项目内的HTTP拦截器文件（通常命名为auth.interceptor.ts或类似格式），定位到intercept方法中自动设置Authorization头的逻辑段。
• 第二步：为拦截器添加Calendly API请求的排除规则，匹配到Calendly域名时直接放行请求，不覆盖Authorization头，参考代码如下：

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  // 匹配Calendly API请求，直接放行不修改请求头
  if (request.url.startsWith('https://api.calendly.com')) {
    return next.handle(request);
  }

  // 原有追加自有应用JWT的逻辑保留不动
  const yourJwtToken = 你的自有JWT获取逻辑;
  if (yourJwtToken) {
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${yourJwtToken}`
      }
    });
  }
  return next.handle(request);
}

• 第三步：删除你现有代码中手动添加的Access-Control-Allow-*系列请求头，这类头是服务端返回的响应头，前端请求侧添加没有任何作用，反而可能导致跨域异常。

验证方案 #

你可以临时注释掉全局HTTP拦截器的注册逻辑，再调用Calendly接口，查看Network面板的请求头是否和你代码中设置的一致，确认问题根源后再恢复拦截器，按上述方案修改即可。

内容的提问来源于stack exchange，提问作者Omar A. Lebda