Estou tentando fazer uma solicitação POST por meio de umURL absoluto a uma API de descanso segura Spring (autenticação básica).
Tendo lido que Angular omite a inserção doX-XSRF-TOKEN no cabeçalho da solicitação automaticamente para URLs absolutas, tentei implementar umHttpInterceptor para adicionar o token.

No meu original/assinar em Solicitação POST, eu crio o necessárioautorização: Básico cabeçalho para garantir que o Spring autentique a solicitação.
O cabeçalho de resposta retornado contém o esperadoset-cookie símbolo:

Set-Cookie:XSRF-TOKEN=4e4a087b-4184-43de-81b0-e37ef953d755; Path=/

No entanto, na minha classe de interceptador personalizado, quando tento obter o token da injeçãoHttpXsrfTokenExtractor para a próxima solicitação, ele retornanulo.

Aqui está o código para minha classe de interceptores:

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


@Injectable()
export class HttpXsrfInterceptor implements HttpInterceptor {

   constructor(private tokenExtractor: HttpXsrfTokenExtractor) {}

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

     let requestMethod: string = req.method;
     requestMethod = requestMethod.toLowerCase();

     if (requestMethod && (requestMethod === 'post' || requestMethod === 'delete' || requestMethod === 'put' )) {
         const headerName = 'X-XSRF-TOKEN';
         let token = this.tokenExtractor.getToken() as string;
         if (token !== null && !req.headers.has(headerName)) {
           req = req.clone({ headers: req.headers.set(headerName, token) });
         }
      }

    return next.handle(req);
   }
}

tokenExtractor.getToken () retorna nulo no código acima. Eu esperava que ele retornasse o token do cabeçalho de resposta Spring (Set-Cookie) do meu anterior/assinar em solicitação.

Eu li este post relacionado para criar o interceptador:
angular4 httpclient csrf não envia x-xsrf-token

Mas não consegui encontrar muita documentação para o HttpXsrfTokenExtractor além disso:
https://angular.io/api/common/http/HttpXsrfTokenExtractor

Pergunta: Por que éHttpXsrfTokenExtractor.getToken () retornando nulo?

Além disso, adicionei a classe interceptora como um provedor aoapp.module.
Aqui está o meu app.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { LocationStrategy, HashLocationStrategy, APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AlertModule } from 'ng2-bootstrap';
import { routing, appRouterProviders } from './app.routing';
import { HttpXsrfInterceptor } from './httpxrsf.interceptor';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './registration/register.component';
import { HomeComponent } from './home/home.component';

@NgModule({
    declarations: [AppComponent,
               LoginComponent,
               RegisterComponent,
               HomeComponent],
    imports: [BrowserModule,
          FormsModule,
          ReactiveFormsModule,
          HttpClientModule,
          HttpClientXsrfModule, // Adds xsrf support
          AlertModule.forRoot(),
          routing],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    providers: [
        appRouterProviders,
        [{provide: APP_BASE_HREF, useValue: '/'}],
        [{provide: LocationStrategy, useClass: HashLocationStrategy}],
        [{provide: HTTP_INTERCEPTORS, useClass: HttpXsrfInterceptor, multi: true }]
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

Outra coisa a notar é que estou executando meu front end Angular no Node.js delocalhost: 3000 e meu back-end do Spring Rest delocalhost: 8080. Eles estão em portas diferentes e, portanto, o motivo de fazer solicitações http comURLs absolutos. O navegador impediria umaSet-Cookie trabalhando quando se trata de uma resposta para uma solicitação em um domínio diferente?

Eu poderia estar perdendo mais alguma coisa?

Obrigado por qualquer ajuda.

----------------------------------------------
[Atualizado em 7 de janeiro de 2018]

CONSERTAR

eu usoServidor de desenvolvimento Webpack para servir o código angular. Eu resolvi o problema configurando umprocuração para URLs que apontam para minha API Rest Rest de back-end.

Isso significa que todas as solicitações feitas no navegador agora são apenas para o servidor de desenvolvimento na porta3000, mesmo para as chamadas da API Rest.
Quando oservidor de desenvolvimento webpack vê qualquer URL de solicitação com o padrão configurado (por exemplo, api / ...), ele substitui as chamadas para o servidor back-end emhttp: // localhost: 8080 (No meu caso).

Este é o meu que eu adicionei aodevServer seção do meuwebpack.dev.js Arquivo:

proxy: {
    '/api': {
    'target': 'http://localhost:8080',
    'pathRewrite': {'^/api' : ''}
    //Omits /api from the actual request. E.g. http://localhost:8080/api/adduser -> http://localhost:8080/adduser
    }
}

Com essa configuração, não faço mais solicitações entre domínios (origem cruzada) a partir do código Angular ou utilizo mais URLs absolutos. Isso simplifica bastante as coisas, já que não estou mais combatendo o mecanismo Angular XSRF (CSRF). Apenas funciona por padrão. Eu também não preciso usar umHttpInterceptor para inserir manualmente oX-XSRF-TOKEN em ambos.

O benefício adicional de configurar um proxy do servidor de desenvolvimento é que as solicitações do cliente não são mais absolutas, portanto, não preciso alterar todas as chamadas da API Rest para produção.

Espero que isso seja útil para quem está sofrendo o mesmo problema / entendimento.

Ref da documentação do proxy do servidor Webpack dev:
https://webpack.js.org/configuration/dev-server/#devserver-proxy