java - 预检响应中的 Access-Control-Allow-Headers 不允许在请求 header 字段 Access-Control-Allow-Origin 中启用 cors

Question

我在后端使用 Spring Boot 服务，在前端使用 Angular 6。

在 Spring Boot 中，我启用了 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);
  }

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

Failed to load http://localhost:7070/example/myservice: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

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

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

得到答案...

Removed this.headers.set("Access-Control-Allow-Origin", "*") from your frontend

和

在拦截器响应中添加到后端..

response.setHeader("Access-Control-Allow-Headers", "Authorization,Content-Type, Content-Range, Content-Disposition, Content-Description,Origin, X-Requested-With, sessionId"); 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.

solution is here