Угловая 2 не отправляет заголовок авторизации с использованием аутентификации JWT

Question

Я пытаюсь создать приложение с использованием Angular2 в качестве интерфейса и cakephp 3 как REST Api, аутентификация работает нормально, но когда я пытаюсь получить доступ к любому другому URL-адресу, я получаю 401 Несанкционированное статус, и я заметил, что метод запроса OPTIONS вместо GET, что я использовал в моем коде, и Авторизация заголовок с моим маркером не отправляется на сервер:

Вот мой user.service.ts код:

constructor(private http: Http, 
      private router: Router, 
) { } 

login(email: string, password: string){ 
    let headers: Headers = new Headers({ 'Accept': 'application/json','Content-Type': 'application/json' }); 
    let options: RequestOptions = new RequestOptions({headers: headers}); 

    return this.http.post('http://www.students.com/api/users/token.json', {email: email, password: password}, options) 
    .map((data: Response)=> data.json()) 
    .subscribe(
    (data)=> this.handlData(data), 
    (error)=> this.handlError(error) 
); 
} 

getSessionData(){ 
    let token = localStorage.getItem('usr_token'); 
    let headers = new Headers({ 'Accept': 'application/json', 'Authorization': 'Bearer ' + token }); 
    let options: RequestOptions = new RequestOptions({headers: headers}); 

    return this.http.get('http://www.students.com/api/users/getSessionData', options).subscribe(
     data => console.log(data), 
     err => console.log(err) 
    ); 
} 

handlData(data){ 

    if(data.success){ 
     let usrData = data.data.user; 
     this.user = new User(usrData.email, usrData.firstname, usrData.lastname, usrData.role, data.data.token); 
     localStorage.setItem('id_token', data.data.token); 
    } 
} 

handlError(error){ 
    console.log(error); 
} 

я пытался использовать angular2-JWT модуль, но я имел ту же ошибку, и чтобы убедиться, что мой API работает отлично, я проверил его с Почтальон хрома расширение, и она работала, как ожидалось:

и вот моя конфигурация Apache2 VirtualHost

<VirtualHost *:80> 
    ServerAdmin webmaster@localhost 
    DocumentRoot /var/www/html/students 
    ServerName www.students.com 
    <Directory /var/www/html/students>       
     Require all granted 
     Options Indexes FollowSymLinks Includes 
     AllowOverride all 
    </Directory> 
    Header always set Access-Control-Allow-Origin "*"     
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS" 
    Header always set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization" 
</VirtualHost> 

у кого-то была такая же проблема? любые идеи, почему это происходит?

Answer 1

Это не проблема с угловым, а с вашим backend. Угловой пытается выполнить запрос предполетной проверки, проверяя, возвращает ли сервер OK запрос OPTIONS. Вы должны настроить свой сервер для ответа на запросы OPTIONS 200 или 204.

Если вы используете node.js:

app.use('/api', (req, res, next) => { 
    /** Browser check for pre-flight request to determine whether the server is webdav compatible */ 
    if ('OPTIONS' == req.method) { 
     res.sendStatus(204); 
    } 
    else next(); 
}); 

Или Laravel (PHP):

App::before(function($request) 
{ 
    // Sent by the browser since request come in as cross-site AJAX 
    // The cross-site headers are sent via .htaccess 
    if ($request->getMethod() == "OPTIONS") 
     return new SuccessResponse(); 
}); 

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

UPDATE: добавил Аскер на CakePHP:

public function initialize() { 
    parent::initialize(); 

    if($this->request->is('options')) { 
     $this->response->statusCode(204); 
     $this->response->send(); 
     die(); 
    } 

    $this->Auth->allow(['add', 'token']); 
}