cors enable in Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

Question

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

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.

in frontend calling 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..

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.

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

you dont need interceptor if global cors configuration is enabled — benjamin c
Remove this.headers.set("Access-Control-Allow-Origin", "*") from your frontend JavaScript code. Access-Control-Allow-Origin isn’t a request header. It’s a response header — sideshowbarker
i'm Using intercepter for other purpose for my rest service. — Praveen

Praveen Praveen · Accepted Answer · 2018-09-06T07:25:33

Got Answer...

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

and

added in backend in intercepter response..

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

cors enable in Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

1 Answers