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

Question

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

以下是如何设置查询参数：

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() 语句显示命中代码中所有预期点。事实上，拦截器添加身份验证标头后的请求对象显示它在其中。

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

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

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

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

- Jdevince

---

更新一下：将相同的Angular文件嵌入到ASP.NET Web Forms中并直接运行（未嵌入）可以正常工作。看起来可能是与ASP.NET Web Forms或IIS有关。即使使用Angular产品构建，在本地嵌入它们也可以正常工作。 - Jdevince

另一个更新：在疑难解答期间，我使用XMLHttpRequest（）而不是Angular的HttpClient来尝试简化事物，并且确实有效。显然，我们希望避免这种情况。var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } }; xhttp.open("GET", this.getBaseUrl() + '/domain/getAll', false); xhttp.setRequestHeader("Authorization", 'Bearer ' + sessionStorage.getItem('access_token')); xhttp.send(); - Jdevince

另一个更新：从Angular.aspx（作为Angular index.html文件的服务）中删除ASP.NET Web Forms主页面确实有效。似乎在ASP.NET Web Forms主页面中有一些东西干扰了Angular的HttpClient。我已经搜索了js和C#代码中会拦截出站http请求的地方，但没有看到任何有希望的地方。一些主页面加载的库包括Telerik.Web.UI、jQuery、DefaultJS和KendoJS。 - Jdevince

Answer 1

问题在于PrototypeJs与Angular冲突。这导致了问题，但没有警告或错误，因此它只是静默地引起了这个问题。PrototypeJs用于包含Angular的ASP.NET Web Forms应用程序中。之所以本地可以运行，但QA环境不行，是因为我实际上有功能来避免在Angular页面加载PrototypeJs，因为之前注意到了其他问题，但由于站点在子路径上启动而不是直接在主机上，所以不加载PrototypeJs的功能在QA环境中无法正常工作。

- Jdevince

Answer 2

你尝试过在拦截器中使用添加头部的较短版本吗：

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

- Lucho

---

很遗憾那并没有帮助到我。不过还是谢谢你的建议！ - Jdevince

Answer 3

拦截器

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;
}

- anthony willis muñoz

---

不幸的是，那并没有帮助。谢谢你的建议！ - Jdevince