http post - как отправить авторизационный заголовок?

Как добавить заголовки в свой HTTP-запрос в Angular2 RC6? Я получил следующий код:

login(login: String, password: String): Observable<boolean> {
    console.log(login);
    console.log(password);
    this.cookieService.removeAll();
    let headers = new Headers();
    headers.append("Authorization","Basic YW5ndWxhci13YXJlaG91c2Utc2VydmljZXM6MTIzNDU2");
    this.http.post(AUTHENTICATION_ENDPOINT + "?grant_type=password&scope=trust&username=" + login + "&password=" + password, null, {headers: headers}).subscribe(response => {
      console.log(response);
    });
    //some return
}

Проблема заключается в том, что angular не добавляет заголовок авторизации. Вместо этого в запросе я вижу следующие дополнительные заголовки:

Access-Control-Request-Headers:authorization
Access-Control-Request-Method:POST

и sdch добавлены в Accept-Encoding:

Accept-Encoding:gzip, deflate, sdch

Неоправданно нет заголовка авторизации. Как добавить его правильно?

Весь запрос, отправленный моим кодом, выглядит следующим образом:

OPTIONS /oauth/token?grant_type=password&scope=trust&username=asdf&password=asdf HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:3002
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
Referer: http://localhost:3002/login
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,pl;q=0.6

Ответы

Ответ 1

Ok. Я нашел проблему.

Он не был на стороне Angular. Честно говоря, проблем не было.

Причина, по которой мне не удалось выполнить мой запрос, было то, что мое приложение-сервер неправильно обрабатывал запрос OPTIONS.

Почему OPTIONS, а не POST? Мое серверное приложение находится на другом хосте, а затем в интерфейсе. Из-за CORS мой браузер преобразовывал POST в OPTION: http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

С помощью этого ответа: Автономный Spring Сервер авторизации OAuth2 JWT + CORS

Я применил правильный фильтр в своем серверном приложении.

Спасибо @Supamiu - человек, который мне пальцы, что я вообще не отправляю POST.

Ответ 2

вам нужны RequestOptions

 let headers = new Headers({'Content-Type': 'application/json'});  
 headers.append('Authorization','Bearer ')
 let options = new RequestOptions({headers: headers});
 return this.http.post(APIname,body,options)
  .map(this.extractData)
  .catch(this.handleError);

для дополнительной проверки этой ссылки

Ответ 3

Я считаю, что вам нужно сопоставить результат, прежде чем подписываться на него. Вы настраиваете его следующим образом:

  updateProfileInformation(user: User) {
    var headers = new Headers();
    headers.append('Content-Type', this.constants.jsonContentType);

    var t = localStorage.getItem("accessToken");
    headers.append("Authorization", "Bearer " + t;
    var body = JSON.stringify(user);

    return this.http.post(this.constants.userUrl + "UpdateUser", body, { headers: headers })
      .map((response: Response) => {
        var result = response.json();
        return result;
      })
      .catch(this.handleError)
      .subscribe(
      status => this.statusMessage = status,
      error => this.errorMessage = error,
      () => this.completeUpdateUser()
      );
  }

Ответ 4

Если вы похожи на меня и играете главную роль в вашей угловой/ионной машинописи, которая выглядит как...

  getPdf(endpoint: string): Observable<Blob> {
    let url = this.url + '/' + endpoint;
    let token = this.msal.accessToken;
    console.log(token);
    return this.http.post<Blob>(url, {
      headers: new HttpHeaders(
        {
          //'Access-Control-Allow-Origin': 'https://localhost:5100',
          //'Access-Control-Allow-Methods': 'POST',
          //'Content-Type': 'application/pdf',
          'Authorization': 'Bearer ' + token,
          'Accept': '*/*',
        }),
        //responseType: ResponseContentType.Blob,
      });
  }

И пока вы устанавливаете параметры, но не можете понять, почему их нет нигде..

Ну.. если вы похожи на меня и начал этот post от копирования/вставки из в get, а затем...

Изменить на:

  getPdf(endpoint: string): Observable<Blob> {
    let url = this.url + '/' + endpoint;
    let token = this.msal.accessToken;
    console.log(token);
    return this.http.post<Blob>(url, null, { //  <-----  notice the null  *****
      headers: new HttpHeaders(
        {
          'Access-Control-Allow-Origin': 'https://localhost:5100',
          'Access-Control-Allow-Methods': 'POST',
          'Content-Type': 'application/pdf',
          'Authorization': 'Bearer ' + token,
          'Accept': '*/*',
        }),
        //responseType: ResponseContentType.Blob,
      });
  }

Ответ 5

Я была такая же проблема. Это моё решение, использующее угловую документацию и жетон Firebase:

getService()  {

const accessToken=this.afAuth.auth.currentUser.getToken().then(res=>{
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': res
    })
  };
  return this.http.get('Url',httpOptions)
    .subscribe(res => console.log(res));
}); }}

Ответ 6

Вот подробный ответ на вопрос:

Передайте данные в заголовок HTTP со стороны Angular (обратите внимание, я использую Angular4. 0+ в приложении).

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

// Option 1 
 const httpOptions = {
   headers: new HttpHeaders({
     'Authorization': 'my-auth-token',
     'ID': emp.UserID,
   })
 };


// Option 2

let httpHeaders = new HttpHeaders();
httpHeaders = httpHeaders.append('Authorization', 'my-auth-token');
httpHeaders = httpHeaders.append('ID', '001');
httpHeaders.set('Content-Type', 'application/json');    

let options = {headers:httpHeaders};


// Option 1
   return this.http.post(this.url + 'testMethod', body,httpOptions)

// Option 2
   return this.http.post(this.url + 'testMethod', body,options)

В вызове вы можете найти поле, переданное в качестве заголовка, как показано на рисунке ниже: enter image description here

Тем не менее, если вы сталкиваетесь с такими проблемами, как.. (Возможно, вам придется изменить сторону бэкэнда /WebAPI)

  • Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin". Источник '' http://localhost: 4200 '' поэтому не имеет доступа

  • Ответ на предпечатную проверку не имеет статуса HTTP ok.

Найти мой подробный ответ на fooobar.com/info/15131414/...