角2はJWT認証を使用して認証ヘッダーを送信しません

Question

私はフロントエンドとしてAngular2を使用してアプリケーションを作成しようとしています、そして、REST APIとしてcakephp 3、認証はうまくいきます。しかし、他の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

これはAngularでは問題ありませんが、バックエンドでは問題ありません。 Angularは、サーバーがOPTIONS要求でOKを返すかどうかを調べることによって、プリフライトリクエストを作成しようとしています。 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']); 
}