Результаты запроса доступа к токену в 302 в Angular HttpClient

Question

Я пытаюсь аутентифицировать запросы на rest-api WordPress, используя тип предоставления password.Аутентификация OAuth2 в WordPress обеспечивается с помощью плагина WP OAuth Server .

Когда я запрашиваю токен доступа с помощью приложения Postman Chrome, сервер отвечает ожидаемым объектом токена доступа, но аналогичный запрос не работает в Angular.Это дает статус 302 и из-за перенаправления xhr на страницу входа, я не могу получить объект токена доступа.Я использую Angular 5.

Вот как я запрашиваю токен доступа в Angular:

/* Example token url
  AuthProvider.TOKEN_URL: 
  https://www.example-wordpress.com/oauth/token
*/

const body = {
  grant_type: 'password',
  username: username,
  password: password,
};

const headers = new HttpHeaders()
  .set('Authorization', 'Basic ' + btoa(AuthProvider.CLIENT_ID + ':' + AuthProvider.CLIENT_SECRET));

this.http.post(AuthProvider.TOKEN_URL, body, { headers: headers });

Приведенный выше запрос выдает 302 с заголовком местоположения, установленным в:

https://www.example-wordpress.com/login/?redirect_to=https%3A%2F%2Fwww.example-wordpress.com%2Foauth%2Ftoken

А затем к указанному выше местоположению делается запрос xhr GET, который отвечает HTML-кодом страницы входа, и, следовательно, токен доступа не получается.

Аналогичный запрос POST для токена доступа в Postman работает нормально и приводит к ожидаемому токену доступа.объект, но я не могу заставить его работать в Angular.

EDIT
Во время отладки я сгенерировал код JavaScript для запроса токена доступа от Postman и вставил его в консоль Chrome после импорта jQuery,Запрос работает, как и ожидалось, в консоли, и перенаправление не происходит.Ответ - JSON с токеном доступа.

Вот код, сгенерированный почтальоном для запроса POST:

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://example-wordpress.com/oauth/token",
  "method": "POST",
  "headers": {
    "content-type": "application/x-www-form-urlencoded",
    "authorization": "Basic M0wzakE3d080VmxxbXB0UUF1dUI5RkxicWxmeE8yR25Zdk4xQmxvbTp4TktTYnJ1Mno5cEp2VDFMbTNGNFhEQm10eDZzUGsya1FqZDg3VmQ2",
    "cache-control": "no-cache",
    "postman-token": "46339abe-2d1a-1032-f5d8-36e3193d9a81"
  },
  "data": {
    "grant_type": "password",
    "username": "my-username",
    "password": "my-password",
    "client_id": "3L3jA7wO4VlqmptQAuuB9FLbqlfxO2GnYvN1Blom",
    "client_secret": "xNKSbru2z9pJvT1Lm3F4XDBmtx6sPk2kQjd87Vd6"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

А вот ответ, записанный сверху кода:

{
  access_token: "rksen3p351fj0povsrpfv2eeuahrciglc3ilphhy",
  expires_in: 3600, 
  token_type: "Bearer",
  scope: "basic",
  refresh_token: "fudju8tecbnwly2e1xgfv92tykvpsniwkfpvrd7d"
}

Я не могу понять, почему происходит перенаправление, когда мы запрашиваем через Angular и не отвечаем маркером доступа JSON.

Любая помощь приветствуется.

Answer 1

Проблем не было вообще.Это была очень, очень глупая ошибка.Я прошу прощения.

Я тестировал одновременно два сайта, и оба имели одинаковую конфигурацию.Единственная разница была в том, что у одного был установлен плагин OAuth, а у другого нет.Поэтому, когда я попытался авторизовать запрос от Angular с веб-сайтом, на котором не был установлен плагин OAuth2, и он был перенаправлен на страницу входа.Константа, установленная для AuthProvider.TOKEN_URL, была установлена ​​неправильно, в то время как при тестировании с другими инструментами я использовал правильный URL.

В любом случае, это была моя ошибка.Это случается иногда, когда вы не отдыхаете.:)

Answer 2

access_token (что, я полагаю, то, что вы ожидаете) не является частью тех немногих заголовков, которые Angular может читать без настройки вашего сервера.

Угловое чтение только «базовых» заголовков, таких как Content-type.Это происходит из-за конфигурации CORS по умолчанию, которая читает только Cache-Control, Content-Language, Content-Type, Expires, Last-Modified и Pragma.Когда дело доходит до пользовательских заголовков, вы должны указать серверу выставить заголовки.

Это делается через заголовок Access-Control-Expose-Headers.