我正在尝试通过绝对 URL向 Spring（基本身份验证）安全的 Rest API 发出 POST 请求。
在阅读了 Angular 省略了将X-XSRF-TOKEN自动插入到绝对 URL 的请求标头中之后，我尝试实现一个HttpInterceptor来添加令牌。
在我的原始/signin POST 请求中，我创建了必要的授权：基本标头以确保 Spring 对请求进行身份验证。
返回的响应标头包含预期的set-cookie令牌：
Set-Cookie:XSRF-TOKEN=4e4a087b-4184-43de-81b0-e37ef953d755; Path=/
但是，在我的自定义拦截器类中，当我尝试从注入的HttpXsrfTokenExtractor获取下一个请求的令牌时，它返回null。
这是我的拦截器类的代码：
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()在上面的代码中返回 null。我希望它能够从我之前的/signin请求
的 Spring (Set-Cookie) 响应标头中返回令牌。
我阅读了有关创建拦截器的相关帖子：
angular4 httpclient csrf does not send x-xsrf-token
但除此之外，我无法找到 HttpXsrfTokenExtractor 的很多文档：
https
://angular.io/api/common/http/HttpXsrfTokenExtractor
问题：为什么HttpXsrfTokenExtractor.getToken()返回 null？
此外，我将拦截器类添加为app.module的提供者。
这是我的 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 {}
另一件需要注意的事情是，我从localhost:3000在 Node.js 上运行我的 Angular 前端，从localhost:8080运行我的 Spring Rest 后端。它们位于不同的端口上，因此使用绝对 urls发出 http 请求的原因。当来自对不同域的请求的响应时，
浏览器会阻止Set-Cookie工作吗？
我还能错过什么吗？
感谢您的任何帮助。
----------------------------------------------
[更新于 1 月 7 日2018]
修复
我使用Webpack 开发服务器来提供 Angular 代码。我通过为指向我的后端 Rest API 的 url配置代理解决了这个问题。
这意味着从浏览器发出的所有请求现在只能发送到端口3000的开发服务器，即使是对于 Rest API 调用也是如此。
当webpack 开发服务器看到任何带有配置模式的请求 url（例如 /api/...）时，它会替换为对http://localhost:8080上的后端服务器的调用（在我的例子中）。
这是我添加到 webpack.dev.js 的devServer部分的内容文件：
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
}
}
有了这个设置，我不再从 Angular 代码发出跨域（跨域）请求，也不再使用绝对 URL。这极大地简化了事情，因为我不再与 Angular XSRF (CSRF) 机制作斗争。它只是默认工作。我也不需要使用HttpInterceptor手动插入X-XSRF-TOKEN。
设置开发服务器代理的额外好处是客户端请求不再是绝对的，因此我不需要更改所有用于生产的 Rest API 调用。
我希望这对遇到同样问题/理解的人有用。
Webpack 开发服务器代理文档参考：
https ://webpack.js.org/configuration/dev-server/#devserver-proxy