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

Question

当 Angular 使用 HttpClient 进行 GET 调用时，我们的 QA 环境中的请求缺少查询参数和授权 header。当运行ning 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 没问题。
如果我将查询参数硬编码到 url 中，是否会发送查询参数？ - 是的。以下适用于查询参数：return this.httpClient.get(this.getBaseUrl() + '/domain/getAll?schedulingOnly=true');
拦截器有问题吗？ - 我不这么认为。 Console.log() 语句显示被命中代码中的所有预期点。事实上，拦截器添加 auth header 后的请求 object 显示它在那里。

我也试过不带拦截器直接设置，但是没有成功。

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 网络服务器是 IIS
API 是 ASP.NET 核心
Angular 嵌入在 ASP.NET Web 窗体项目中（由于将遗留代码逐步迁移到 Angular）

Answer 1

您是否尝试过在拦截器中添加 header 的较短版本：

const request = request.clone({ 
  setHeaders: { 'Authorization': 'Bearer ' + sessionStorage.getItem('access_token') } 
});

Answer 2

拦截器

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>) {

   return request.clone({
      setHeaders: {
        Authorization: `Bearer ${sessionStorage.getItem('access_token')}`
      }
    });

    return request;
}

Answer 3

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

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

Angular HttpClient calls are missing query string and Authorization header

asp.net

iis

webforms

http

angular