Angular В вызовах HttpClient отсутствуют строка запроса и заголовок авторизации.

Question

Когда Angular выполняет вызов GET с использованием HttpClient, параметры запроса и заголовок авторизации отсутствуют в запросе в нашей среде QA. При локальном запуске Angular, указывающем на API QA, он отправляет их обоих как положено.

Вот как задаются параметры запроса:

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 dev tools показывает:

Это все основные сведения c, но ниже приведена дополнительная информация о том, что я пробовал без успеха.

• Это проблема 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);

• Нет ошибок js в консоли, кроме ошибки 401
• веб-сервер QA является IIS
• API-интерфейсы ASP. NET Core
• Angular встроен в ASP . NET Проект веб-форм (из-за постепенного переноса этого устаревшего кода в Angular)

Answer 1

Перехватчик

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 2

Проблема заключалась в том, что Прототип Js мешал Angular. Это привело к проблеме, но никаких предупреждений или ошибок, так что это просто молча вызывает эту проблему. Прототип Js используется в содержащем ASP. NET приложении веб-форм, в которое встроено Angular. Причина, по которой это работало локально, но не в QA, заключается в том, что у меня действительно была возможность не загружать Prototype Js, если это была страница Angular, из-за того, что я замечал другие проблемы раньше, но это не работало в QA из-за на сайт, начинающийся с подпути, а не непосредственно на хосте, чтобы не работала функция не загружать Prototype Js.

Answer 3

Вы пробовали использовать более короткую версию добавления заголовка в ваш перехватчик:

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