在飞行前响应中，Access-Control-Allow-Headers不允许在Request标头字段中使用cors enable Access-Control-Allow-Origin

问题描述

我在后端使用Spring Boot服务，在前端使用angular 6.

I'm using spring boot service for backend and and angular 6 for frontend.

在春季启动中，我启用了cors使用.

In spring boot i enabled cors using.

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

我正在为每种服务使用拦截器.

and i'm using intercepter for each service.

在前端呼叫服务中:

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);
  }

如果使用拦截器，我将遇到异常情况.不使用拦截器，我不会得到错误提示..

I'm getting below exception if using intercepter. Without using interepter i'm not getting cors error..

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

In my intercepter i added below thing:

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");
        }

推荐答案

得到答案...

和

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

added in backend in intercepter response..

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.

解决方案在这里

这篇关于在飞行前响应中，Access-Control-Allow-Headers不允许在Request标头字段中使用cors enable Access-Control-Allow-Origin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！