Как пройти аутентификацию с помощью токена заголовка авторизации в запросах API в angular

Я собираюсь запросить вызов для получения данных с моего сервера. Я включил авторизацию для использования токена Bearer в большинстве запросов. Как я могу включить это, когда я запрашиваю что-то с сервера? (что я делаю не так? Пожалуйста, помогите мне.)

Например, у меня есть файл с именем Categories.service.ts, который будет получать категории с сервера.

@Injectable({
  providedIn: 'root'
})
export class CategoriesService {

  private _url: string = "http://ifsstudents.educationhost.cloud/v2/categories/list";

  constructor(private http:HttpClient) { }

  private token: string="Bearer eyJ0eXA....";

  getCategories():Observable<ICategory[]>{
    let header = new HttpHeaders().set(
      "Authorization",this.token
    );

    return this.http.get<ICategory[]>(this._url,{headers:header});
  }
}

Я протестировал использование Postman с токеном Bearer, он работает без проблем. введите здесь описание изображения

вот журнал ошибок введите здесь описание изображения


javascript angular get-request bearer-token
person MrMalith    schedule 25.05.2020    source источник
comment
какие-либо ошибки? ты похоже не проверяешь ошибки   -  person Jaromanda X    schedule 25.05.2020
comment
Проверьте наличие ошибок cors в консоли. Если это работает в почтальоне, но не в угловом, это обычно является причиной. Если нет, покажите больше своего кода (подписка, ошибка, обработчик) и скриншоты сетевых запросов/ответов (заголовок и данные) из вашего браузера.   -  person David    schedule 25.05.2020
comment
подожди, я обновлю вопрос @David   -  person MrMalith    schedule 25.05.2020
comment
Это проблема межсайтового происхождения для проверки вашего файла конфигурации и добавления записи включения ядра.   -  person Charanjeet Singh    schedule 25.05.2020
comment
Вы пытаетесь подключиться к установленному серверу с помощью тестового приложения? Если да, вам может подойти подход proxy-config.   -  person Supun De Silva    schedule 25.05.2020
comment
Как мне это сделать? не могли бы вы сказать мне, как? @ЧаранджитСингх   -  person MrMalith    schedule 25.05.2020
comment
да. @SupunDeSilva, что вы подразумеваете под подходом прокси-конфигурации?   -  person MrMalith    schedule 25.05.2020
comment
@M.Sachintha, пожалуйста, перейдите по этому URL-адресу, который может помочь вам daveceddia. ком/   -  person Charanjeet Singh    schedule 25.05.2020
comment
Добавил в качестве ответа, так как у меня нет подходящей недвижимости в комментариях. Дайте мне знать, если это работает   -  person Supun De Silva    schedule 25.05.2020
comment
@ М.Сачинта это сработало?   -  person Supun De Silva    schedule 26.05.2020
comment
нет, не @SupunDeSilva ... извините, я был занят на работе .. я попробую еще раз и дам вам знать. Я думаю, что проблема и с моим сервером. Я также включил все заголовки CORSE.   -  person MrMalith    schedule 26.05.2020
comment
Идея заключалась в том, чтобы отказаться от заголовков CORS и использовать промежуточный сервер в качестве прокси. Доступен ли этот API для публики?   -  person Supun De Silva    schedule 27.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Измените CategoriesService следующим образом

@Injectable({
providedIn: 'root'
})
export class CategoriesService {

private _url: string = "/api/categories/list";

constructor(private http:HttpClient) { }

private token: string="Bearer eyJ0eXA....";

getCategories():Observable<ICategory[]>{
    let header = new HttpHeaders().set(
    "Authorization",this.token
    );

    return this.http.get<ICategory[]>(this._url,{headers:header});
}
}

в вашей корневой папке (тот же уровень, что и папка src) создайте файл с именем proxy.conf.json со следующим содержимым

{
  "/api/*": {
    "target": "http://ifsstudents.educationhost.cloud/v2",
    "secure": true,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

Запустите приложение с

ng serve --proxy-config proxy.conf.json -o

Следите за консолью, чтобы увидеть, правильно ли происходит преобразование маршрута, вы должны увидеть что-то вроде следующего

[HPM] Rewriting path from "/api/categories/list" to "/categories/list" [HPM] GET /api/categories/list ~> http://ifsstudents.educationhost.cloud/v2

Если вы намерены внедрить это в производство, вам необходимо включить соответствующие правила CORS в ifsstudents.educationhost.cloud.

person Supun De Silva    schedule 25.05.2020