Casius Casius - 15 days ago 10
PHP Question

Authorization Header is ignored in PHP Backend from Angular 2 http get request

I am trying to send an authorization header from my ionic 2 app with following code:

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class MembersService {

private baseUrl = 'http://xxx';
constructor(private http: Http) {

}

getMemberlist() {
return new Promise(resolve => {
this.http.get(`${this.baseUrl}`, this.jwt())
.map(res => res.json())
.subscribe(res => resolve(res.v_members));
});
}

private jwt() {
let currentUser = JSON.parse(localStorage.getItem('currentUser'));
if (currentUser && currentUser.token) {
let headers = new Headers({ 'Authorization': 'Bearer ' + currentUser.token });
console.log(headers);

return new RequestOptions({ headers: headers });
}
}
}


On PHP Backend I look into the headers with:

$headers = getallheaders();
file_put_contents("headers.txt", print_r($headers, true));


and get follwing output:

Array
(
[Host] => xxx
[Connection] => close
[Access-Control-Request-Method] => GET
[Origin] => http://localhost:8100
[User-Agent] => Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko$
[Access-Control-Request-Headers] => authorization
[Accept] => */*
[Referer] => http://localhost:8100/
[Accept-Encoding] => gzip, deflate, sdch
[Accept-Language] => de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4
)


I have already added following to .htaccess:

RewriteCond %{HTTP:Authorization} ^(.+)
RewriteRule ^(.*)$ $1 [E=HTTP_AUTHORIZATION:%1,PT]


When I connect to the API with postman the Authorization Header is present:

Array
(
[Authorization] => Bearer test_token
[Host] => xxx
[Connection] => close
[Cache-Control] => no-cache
[User-Agent] => Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.$
[Postman-Token] => 9b51b6fe-2c24-564c-9998-1acb5b02136e
[Accept] => */*
[Accept-Encoding] => gzip, deflate, sdch
[Accept-Language] => de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4
[Cookie] => PHPSESSID=uiboq2m0isfgb16kfrr9dtbji1
)


What am I missing here?

edit:

code setting the localstorage:

there is no problem in the response from the login. the user and token is set in localstorage

login(username, password) {
return this.http.post(this.baseUrl, JSON.stringify({ username: username, password: password }))
.map((response: Response) => {
let user = response.json();
if (user && user.token) {
localStorage.setItem('currentUser', JSON.stringify(user));
}
});
}

Answer

I finally found the solution. The problem was, that I misunderstood the error response. The HTTP-Request from angular is sending a preflight that got rejected with a the 401 response from my backend. The actual request was never send. The header I posted above is the header of the preflight, therefore without any authorization stuff. After I changed my backend to properly respond to the preflight, the request is sent including the authorization-header.

Comments