角4：応答からヘッダーを読み取ることができません - CORSの問題ではありません

Question

トークンを自動的に更新するサーバーのコンテキストでは、基本から悩んでいます。

私のNode/expressが承認/ xアクセストークンとそれに応じた応答をすべて受けているため、CORSに関連していないようです（下記のネットワークタブのscreeencapを参照してください）。

作業を確認したい最初のステップは、応答からヘッダーを読み取るだけです。私のコードを参照してください、それはドキュメントにある定型句です。イベント "Content-Length"を取得するとnullが返されます。

のauth-service.ts

login(username:string, password:string):Observable<boolean>{ 
    this.loggedIn = false; 
    return new Observable((observer:Observer<boolean>) => { 

     const body = {user: username, pwd: password}; 
     const url = this.config.API_ENDPOINT_PUBLIC_AUTH; 

     this.httpClient.post(url, body, { 
     responseType: 'text', 
     observe: "response" 
     }).first().subscribe(
     (response:HttpResponse<string>) => { 

      // DEBUG 
      console.log(response.headers.get('Authorization')); 
      console.log(response.headers.get('X-Test-Header')); 
      console.log(response.headers.get('Content-length')); 


      this.token = response.headers.get('Authorization'); 
      this.storeToken(this.token); 
      this.currentUser = username; 
      this.loggedIn = true; 
      this.authChanged$.next('auth'); 
      observer.next(true); 
     }, 
     (err) => observer.next(false), 
     () => {}, 
    ); 
    }); 
    } 

コンソール出力：

ヌル

ヌル

ヌル

は、この要求のための私のネットワークタブの内容にこれを比較します。私のHttpInterceptorを言うために

言うまでもなくは動作しないか - 応答で「承認」ヘッダを提供されると、その値を使用しています新しいトークンとして。このトークンの自動更新を実装するには：

token.interceptor.ts

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

    const authService = this.injector.get(AuthService); 
    const token = authService.getToken(); 

    if(token){ 
     request = request.clone({ 
     setHeaders: { 'x-access-token' : token } 
     }); 
    } 

    return next.handle(request).do(
     (event: HttpEvent<any>) => { 
     if (event instanceof HttpResponse) { 
      const response:HttpResponse<any> = (<HttpResponse<any>> event); 
      const authorizationHeader = response.headers.get('Authorization'); 
      console.log('Authorization header value: ' + authorizationHeader); 
      if(authorizationHeader){ 
      authService.setToken(authorizationHeader); 
      } 
     } 
     }, 
     (err: any) => { 
     if (err instanceof HttpErrorResponse){ 
     if (err.status === 401) { 
      this.router.navigate(['/']); 
     } 
     } 
    }); 
    } 

Answer 1

を[OK]を、ここでの答えは次のとおりです。私は、バックエンドとしてのNode.js/Expressを使用していますし、ヘッダがあるにもかかわらず、 Chromeの[ネットワーク]タブに表示されているため、Angularによる処理に対応していません。

「どのように見えるのですか？使用できません。まだ私には分かりません。

function configureExpress(expressApp){ 
    expressApp.use(bodyparser.urlencoded({ extended: true })); 
    expressApp.use(bodyparser.json()); 

    // Middleware: Use CORS, add headers and allow methods 
    expressApp.use(expressMiddleware); 
} 

function expressMiddleware(req, res, next) { 

    // Request origin: Allow ALL 
    res.header("Access-Control-Allow-Origin", "*"); 

    // Allowed headers 
    res.header("Access-Control-Allow-Headers", 

     "Origin" 
     +",X-Requested-With" // Dont allow AJAX CORS without server consent - see http://stackoverflow.com/questions/17478731/whats-the-point-of-the-x-requested-with-header 
     +",x-access-token" 
     +",Content-Type" 
     +",Authorization" 
     +",Accept" 
    ); 

    // SOLUTION HERE 
    // Allow headers access 
    res.header("access-control-expose-headers", 
     ",Authorization" 
     +",Content-Length" 
     ); 

    // Allowed methods 
    res.header('Access-Control-Allow-Methods', 
     'GET,' 
     +',POST' 
     +',OPTIONS' 
     +',PUT,' 
     +',DELETE' 
    ); 

    // Handle CORS requests: cross-domain/origin requests will begin with an OPTION request to the same endpoint. 
    if('OPTIONS' === req.method){ 
     res.sendStatus(200); 
    } 

    else{ 
     // Request validations complete 
     next(); 
    } 
}