Estoy tratando de hacer una solicitud POST a través de unURL absoluta a una API de descanso segura Spring (autenticación básica).
Habiendo leído que Angular omite insertar elX-XSRF-TOKEN en el encabezado de la solicitud automáticamente para las URL absolutas, intenté implementar unHttpInterceptor para agregar el token.

En mi original/registrarse POST solicitud, creo lo necesarioautorización: básica encabezado para garantizar que Spring autentique la solicitud.
El encabezado de respuesta devuelto contiene el esperadoset-cookie simbólico:

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

Sin embargo, en mi clase de interceptor personalizado cuando intento obtener el token del inyectadoHttpXsrfTokenExtractor para la siguiente solicitud, devuelvenulo.

Aquí está el código para mi clase de interceptor:

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 () devuelve nulo en el código anterior Esperaba que devolviera el token del encabezado de respuesta Spring (Set-Cookie) de mi anterior/registrarse solicitud.

Leí esta publicación relacionada para crear el interceptor:
angular4 httpclient csrf no envía x-xsrf-token

Pero no pude encontrar mucha documentación para HttpXsrfTokenExtractor aparte de esto:
https://angular.io/api/common/http/HttpXsrfTokenExtractor

Pregunta: ¿Por qué esHttpXsrfTokenExtractor.getToken () volviendo nulo?

Además, agregué la clase interceptor como proveedor alapp.module.
Aquí está mi 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 {}

Otra cosa a tener en cuenta es que estoy ejecutando mi front-end angular en Node.js desdelocalhost: 3000 y mi back-end Spring Rest delocalhost: 8080. Están en diferentes puertos, por lo que la razón para hacer solicitudes http conURL absolutas. ¿El navegador evitaría unSet-Cookie funciona cuando se trata de una respuesta a una solicitud en un dominio diferente?

¿Me podría faltar algo más?

Gracias por cualquier ayuda.

----------------------------------------------
[Actualizado el 7 de enero de 2018]

REPARAR

yo sueloServidor de desarrollo webpack para servir el código angular. Trabajé el problema configurando unapoderado para las URL que apuntan a mi API de Rest de back-end.

Esto significa que todas las solicitudes realizadas desde el navegador ahora solo se enviarán al servidor de desarrollo en el puerto3000, incluso para las llamadas de la API Rest.
Cuando elservidor de desarrollo webpack ve cualquier URL de solicitud con el patrón configurado (por ejemplo, api / ...), reemplaza con llamadas al servidor de fondo enhttp: // localhost: 8080 (en mi caso).

Este es mi lo que agregué aldevServer sección de miwebpack.dev.js archivo:

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
    }
}

Con esta configuración, ya no hago solicitudes de dominio cruzado (origen cruzado) desde el código angular o ya no uso URLs absolutas. Esto simplifica enormemente las cosas ya que ya no estoy luchando contra el mecanismo Angular XSRF (CSRF). Simplemente funciona por defecto. Tampoco necesito usar unHttpInterceptor para insertar manualmente elX-XSRF-TOKEN en cualquiera.

El beneficio adicional de configurar un proxy de servidor de desarrollo es que las solicitudes de los clientes ya no son absolutas, por lo que no necesito cambiar todas las llamadas de API Rest para producción.

Espero que esto sea útil para cualquiera que esté sufriendo el mismo problema / comprensión.

Ref. De documentación del proxy del servidor de desarrollo webpack:
https://webpack.js.org/configuration/dev-server/#devserver-proxy