从响应标头访问set-cookie并将其存储在浏览器cookie（csrf issue）angular 2

Question

我试图通过从Auth服务中的响应的SET-COOKIE标头中取值来设置标头中的X-CSRF-TOKEN ....

为此，我通过从Http模块扩展Http服务，在angular2中配置了一个拦截器。这是以下代码片段......

@Injectable()
export class HttpService extends Http {

    constructor(_backend: ConnectionBackend, _defaultOptions: RequestOptions) {
        super(_backend, _defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.request(url, options));
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        alert('get');
        return this.intercept(super.get(url, this.getRequestOptionArgs(options)));
    }

    post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { 
        alert('post');
        console.log(url, body, this.getRequestOptionArgs(options));
        return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
    }

    put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
    }

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.delete(url, options));
    }

    getRequestOptionArgs(options?: RequestOptionsArgs) : RequestOptionsArgs {
        if (options == null) {
            options = new RequestOptions();
        }
        if (options.headers == null) {
            options.headers = new Headers();
        }
        options.headers.append('Accept', '*/*');
        options.headers.append('Content-Type', 'application/json');
        options.withCredentials = true;
        return options;
    }

    intercept(observable: Observable<Response>): Observable<Response> {
        return observable;
    }
}

因此，当我在Auth服务的响应中从set-cookie标头获取CSRF-Token后自动执行此操作时，它会作为cookie添加到其他后续请求中，因为我已经使用了“ true < /强>”。

现在我需要在后续请求中再发送一个名为“X-CSRF-TOKEN”的标头，标头的值应该是CSRF-TOKEN cookie值。为此，我使用Angular2功能XSRFStrategy将cookie值注入该Header。以下是以下代码......

的AppModule

export class AppCSRFStrategy implements XSRFStrategy {
    constructor( private _cookieName: string,
                 private _headerName: string){ }

    configureRequest(req: Request): void {
        console.log('trying to set the header');
    }
}

@NgModule({
  imports: [  BrowserModule,
              HttpModule,
              AppRoutingModule,  
              NgbModule.forRoot(), 
              AgmCoreModule.forRoot({
                apiKey: '***********************'
              }),
              CustomerModule,
              AppSharedModule ],
  declarations: [ AppComponent ],
  providers: [ {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },  UserService, 
        AccessGuard,
        CookieService, 
        { provide: XSRFStrategy, useValue: new AppCSRFStrategy('CSRF-TOKEN', 'X-Csrf-Token') },
        { provide: Http, useFactory: httpClientFactory, deps: [ XHRBackend, RequestOptions ] }
  ],
  bootstrap: [ AppComponent ]
})

我的问题是响应标头中的cookie未存储在浏览器cookie中，而且还存储为http_only：false和secure：false ....请提前帮助谢谢....

Plunker补充说：https://plnkr.co/edit/opERHKHPPk1AcVsTfF38?p=preview

发现类似问题：Angular 2 - Get cookie from response