请求标头字段中的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错误。

加载失败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 "，" * ")

和

添加到拦截器响应的后端..

回答setHeader（“访问控制允许标头”、“授权、内容类型、内容范围、内容配置、内容描述、来源、X请求、会话ID”）；回答setHeader（“访问控制允许原点”、“*”；

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.

解决方案就在这里