在预检响应中，访问控制-允许-标头不允许在请求标头字段中启用访问控制-允许-源

Question

我正在后端使用spring启动服务，并将angular 6用于前端。

在春季启动中，我启用了 cors。

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/interview/**").allowedOrigins("*");
}

我为每个服务使用拦截器。

在前端呼叫服务中：

headers = new Headers();
constructor(private http: Http, private logger: MLogger) {
this.headers.set("Access-Control-Allow-Origin", "*");
this.headers.set( 'Content-Type', 'application/json',);
this.headers.set( 'Accept', '*');
this.headers.set( 'sessionId', DataService.sessionId);
}
private options = new RequestOptions({ headers: this.headers});
interviewCommand: InterviewCommand;
getInterviewDetails(data: any): Promise<any> {
const serviceURL = environment.startInterviewURL;
return this.http
.post(serviceURL,data, this.options)
.toPromise()
.then(
interviewCommand => {
//doing some stuff
}
})
.catch(this.handleInterviewCommandError);
}

如果使用拦截器，我会得到以下异常。不使用 interepter 我不会收到 cors 错误。

无法加载 http://localhost:7070/example/myservice：请求标头 字段访问控制允许原点不允许 预检响应中的访问控制允许标头。

在我的拦截器中，我添加了以下内容：

if (request.getMethod().equals("OPTIONS")) {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Origin-Methods", "GET, POST, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Range, Content-Disposition, Content-Description,Origin, X-Requested-With");
response.setHeader("Access-Control-Expose-Headers", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Max-Age", "4800");
}

Answer 1

得到答案...

从您的中删除了 this.headers.set("Access-Control-Allow-Origin"， "*"( 前端

和

在拦截器响应的后端添加。

response.setHeader("Access-Control-Allow-Headers"， "授权、内容类型、内容范围、内容处置、 内容描述，来源，X请求与，会话ID"(; response.setHeader("Access-Control-Allow-Origin"， "*"(;

When you start playing around with custom request headers you will get a CORS preflight. This is a request that uses the HTTP OPTIONS verb and includes several headers, one of which being Access-Control-Request-Headers listing the headers the client wants to include in the request.
You need to reply to that CORS preflight with the appropriate CORS headers to make this work. One of which is indeed Access-Control-Allow-Headers. That header needs to contain the same values the Access-Control-Request-Headers header contained (or more).
https://fetch.spec.whatwg.org/#http-cors-protocol explains this setup in more detail.

解决方案就在这里