asp.net - Angular HttpClient 调用缺少查询字符串和授权 header

Question

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

查询参数的设置方式如下:

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

以下是授权 header 的设置方式(拦截器):

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，没有问题。
• 如果我将查询参数硬编码到网址中，查询参数是否会被发送？ - 是的。以下内容适用于查询参数: return this.httpClient.get(this.getBaseUrl() + '/domain/getAll?schedulingOnly=true');
• 拦截器有问题吗？ - 我不这么认为。 Console.log() 语句显示代码中被命中的所有预期点。事实上，拦截器添加 auth header 后的请求对象将其显示在那里。

我也尝试过不使用拦截器直接设置，但没有成功。

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 的功能不起作用。