Angular HttpClient 调用缺少查询字符串和授权标头

Question

当 Angular 使用 HttpClient 进行 GET 调用时，在我们的 QA 环境中，请求中缺少查询参数和授权标头。当在本地运行 Angular 时，指向 QA API，它会按预期发送它们。

以下是查询参数的设置方式：

const params = new HttpParams().set('schedulingOnly', schedulingOnly ? 'true' : 'false');
return this.httpClient.get<any>(this.getBaseUrl() + '/domain/getAll', { params });

以下是 Authorization 标头的设置方式（拦截器）：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (environment.useHttpMockRequestInterceptor) {
        return this.useMockData(request);
    } else {
        request = this.AddAuthenticationHeader(request);
        return next.handle(request);
    }
}

private AddAuthenticationHeader(request: HttpRequest<any>) {
    const request = request.clone({
        headers: request.headers
            .set('Authorization', 'Bearer ' + sessionStorage.getItem('access_token'))
    });

    return request;
}

以下是 Chrome 开发工具显示的内容：

这是所有基本信息，但下面是有关我尝试过但没有成功的事情的附加信息。

• 这是 CORS 问题吗？- 在寻找其他有此问题的人时，我遇到了很多 CORS 问题。我不相信这里的情况是这样，因为 Angular 和 API 在同一个域中，我可以在本地运行 Angular 并且命中 API 没问题。
• 如果我将查询参数硬编码到 url 中，是否会发送查询参数？- 是的。以下适用于查询参数： return this.httpClient.get(this.getBaseUrl() + '/domain/getAll?schedulingOnly=true');
• 这是拦截器有问题吗？- 我不这么认为。Console.log() 语句显示被命中的代码中的所有预期点。实际上，拦截器添加 auth 标头后的请求对象显示在那里。

我也尝试在没有拦截器的情况下直接设置，但没有运气。

const obj = {
  headers: { 'Authorization': 'Bearer ' + sessionStorage.getItem('access_token') },
  params: { 'schedulingOnly': schedulingOnly ? 'true' : 'false' }
};

return this.httpClient.get<any>(this.getBaseUrl() + '/domain/getAll', obj);

• 控制台除了401错误没有js错误
• QA Web 服务器是 IIS
• API 是 ASP.NET Core
• Angular 嵌入在 ASP.NET Web Forms 项目中（由于将遗留代码逐步迁移到 Angular 中）

Answer 1

问题是 PrototypeJs 干扰了 Angular。这导致了这个问题，但没有警告或错误，所以它只是默默地导致了这个问题。PrototypeJs 用于包含 Angular 嵌入的 ASP.NET Web 表单应用程序。这是在本地工作但在 QA 中不起作用的原因是因为我实际上确实具有不加载 PrototypeJs 的功能（如果它是 Angular 页面），这是由于之前注意到其他问题，但由于网站从 开始，所以在 QA 中不起作用子路径，而不是直接在主机上，因此不加载 PrototypeJs 的功能不起作用。