Как добавить заголовок авторизации в Angular http-запрос?

Это мой первый пост.

Я только начал изучать Go и Angular и пытаюсь подключить угловое приложение к go api. Я написал оба и застрял, определяя корень проблемы. Я думал, что это проблема CORS, но она работает нормально, если я не включаю строку кода заголовков в мой http-запрос Angular. На данный момент я просто пытаюсь добавить заголовок. Код авторизации еще не реализован.

Оба приложения работают локально с приложением Go на порту 5000 и Angular на 4200

Angular http-запрос, который не работает:

this.http.get<ProjectedBalance>(requestUrl, {headers: new HttpHeaders().set('Authorization', 'my-auth-token')})
    .subscribe(data => {
     this.projBalance = data.projBalance;
   }

angular запрос http:

this.http.get<ProjectedBalance>(requestUrl)
    .subscribe(data => {
     this.projBalance = data.projBalance;
   }

Я получаю эту ошибку:

Ответ на предполетный запрос не проходит проверку контроля доступа: Нет Заголовок "Access-Control-Allow-Origin" присутствует в запрошенном ресурс. Следовательно, происхождениеhttp://localhost:4200 не допускается доступ. Ответ имеет HTTP-код состояния 403

Я использую в своем коде go обработчики gorilla/mux и gorilla/

router := mux.NewRouter()
router.HandleFunc("/home/{endDate}", GetProjBalance).Methods("GET", "OPTIONS")
headersOk := handlers.AllowedHeaders([]string{"X-Requested-With, Content-Type, Authorization"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})
//start server on port
log.Fatal(http.ListenAndServe(":5000", handlers.CORS(originsOk, headersOk, methodsOk)(router)))

Заголовки из Chrome Dev Tools

Request URL:http://localhost:5000/home/2020-12-21
Request Method:OPTIONS
Status Code:403 Forbidden
Remote Address:[::1]:5000
Referrer Policy:no-referrer-when-downgrade

Response Headers
view source
Content-Length:0
Content-Type:text/plain; charset=utf-8
Date:Mon, 20 Nov 2017 21:39:43 GMT

Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9,uz;q=0.8
Access-Control-Request-Headers:authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:5000
Origin:http://localhost:4200

Ответы

Ответ 1

Что касается наилучшего способа обработки заголовков аутентификации в Angular > 4, лучше всего использовать Http Interceptors для добавления их к каждому запросу, а затем используя Guards для защиты ваших маршрутов.

Вот полный пример AuthInterceptor, который я использую в своем приложении:

auth.interceptor.ts

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        'Authorization': `Bearer ${AuthService.getToken()}`,
      },
    });

    return next.handle(req);
  }
}

Вам необходимо зарегистрировать ваш перехватчик в app.module в качестве поставщика:

app.module.ts

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthInterceptor } from '../auth/auth.interceptor';

...

imports: [
    HttpClientModule,
    ...
],
providers: [
    {
      provide : HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi   : true,
    },
    ...
],

...

Вы можете прочитать об этом методе далее в этой post.

Что касается стороны Go, это, скорее всего, случай несоответствия между Запросить заголовки, которые вы отправляете, и заголовки CORS разрешить.
Первое, что вы должны попробовать, это все:

headersOk := handlers.AllowedHeaders([]string{"*"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

И если проблема исчезнет, ​​попробуйте тщательно структурировать CORS один за другим для отправки вашего клиента.

Ответ 2

Если вы не хотите добавлять перехватчик, это работает для меня:

var header = {
  headers: new HttpHeaders()
    .set('Authorization',  'Basic ${btoa(AuthService.getToken())}')
}

this.http.get(url, header)

Для предъявителя,

set('Authorization',  'Bearer ${AuthService.getToken()}')

Ответ 3

Вот пример:

this.http
        .get(url, return new RequestOptions({
          headers: new Headers({
            Authorization: `Bearer ${authtoken}`
          }),
        }))
        .map(res => res.json());

Ответ 4

Angular 6 ==> Пример запроса HTTP Get с заголовком авторизации

public IsClientCreditCardExits(companyId: string, token: any) {
    let header = new Headers({ 'Authorization': 'Bearer ${token}' });
    const options = new RequestOptions({
       headers: header,
    });
    return this._http.get(this.ApiURL + "api/Subscriptions/IsClientCreditCardExits/" + companyId + "/", options);    
}