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/...