当Angular使用HttpClient进行GET调用时,在我们的QA环境中请求中缺少查询参数和Authorization头。当将Angular指向QA APIs并在本地运行时,它会按预期发送它们。
以下是如何设置查询参数:
以下是Authorization头部的设置方法(拦截器):
这是Chrome开发者工具的显示内容:
这就是所有基本信息,但下面是有关我尝试过但没有成功的其他信息。
- 这是CORS问题吗? - 在搜索其他人的问题时,我遇到了许多CORS问题。我不认为这是因为Angular和API在同一个域中,我可以在本地运行Angular并轻松调用API。 - 如果我将查询参数硬编码到URL中,是否会发送查询参数? - 是的,以下是正确的查询参数代码:return this.httpClient.get(this.getBaseUrl() + '/domain/getAll?schedulingOnly=true'); - 是否存在拦截器问题? - 我不这样认为。 Console.log() 语句显示命中代码中所有预期点。事实上,拦截器添加身份验证标头后的请求对象显示它在其中。
以下是如何设置查询参数:
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开发者工具的显示内容:
![Debugging tools](https://istack.dev59.com/la66Y.webp)
- 这是CORS问题吗? - 在搜索其他人的问题时,我遇到了许多CORS问题。我不认为这是因为Angular和API在同一个域中,我可以在本地运行Angular并轻松调用API。 - 如果我将查询参数硬编码到URL中,是否会发送查询参数? - 是的,以下是正确的查询参数代码:return this.httpClient.get(this.getBaseUrl() + '/domain/getAll?schedulingOnly=true'); - 是否存在拦截器问题? - 我不这样认为。 Console.log() 语句显示命中代码中所有预期点。事实上,拦截器添加身份验证标头后的请求对象显示它在其中。
![enter image description here](https://istack.dev59.com/KFoZk.webp)
我也尝试过不使用拦截器直接设置,但是没有成功。
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)