web-dev-qa-db-ja.com

Angular 7要求時に正しいヘッダーを送信していません

angular 7！で正しい見出しを送信できません！バックエンドでパスポートを使用しています：

"app.get('/api/users', passport.authenticate('jwt', {session: false}), (req, res, next) => {... bla bla bla...}."

有効なトークンを郵便配達員から私のパス/ API /ユーザーに送信しようとすると、すべて正常に動作しますが、angular not。（* Angular dont show error！）from Bearer validToken 'は有効なトークンですこのようにして、ヘッダーを送信します。

getAll() {

const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer validToke.' 
  });
};

return this.http.get<user[]>(`http://localhost:3000/api/users`, httpOptions);
}

angularから認証でき、Bearerトークンを取得できます。すべて正常に動作します。passport.authenticate（ 'jwt'、{session：false}）を削除すると、ユーザーのリストを取得できます。

読んでくれてありがとう！

angularhttp-headersjwtpassport.jsangular7
6
Augusto

インターセプターを作成することでこの問題を解決できました。

import { Injectable } from '@angular/core';
    import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
    import { Observable } from 'rxjs';

    import { AuthenticationService } from '../_services/authentication.service';

    @Injectable()
    export class JwtInterceptor implements HttpInterceptor {
      constructor(private authenticationService: AuthenticationService) {}

      intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = this.authenticationService.currentUserValue;
        if (currentUser && currentUser.token) {
          request = request.clone({
            setHeaders: {
              Authorization: `${currentUser.token}`
            }
          });
        }

        return next.handle(request);
      }
    }

ありがとう

2
Augusto

すべてが私にとって正しいようです-しかし、私はあなたのコードにいくつかの小さな変更があります

HttpOptionsをバインドしないでください。リクエストでHttpHeadersを直接バインドしないでください。以下のコードを確認してください

getAll() {

const httpHeaders = new HttpHeaders ({
     'Content-Type': 'application/json',
     'Authorization': 'Bearer validToke.' 
   });

return this.http.get<user[]>(`http://localhost:3000/api/users`, { headers: httpHeaders });
}

これにより、リクエストのヘッダーが追加されます-異なるドメインからデータを取得するために使用している場合-サーバーにCORを追加しようとすると-ブラウザはリクエストをHttpOptionsとしてプリフライトし、その後HttpGetとしてバインドします

それがうまくいくことを願って-ハッピーコーディング!!

2
Rahul