Error while adding more headers to a HTTP request

Question

I am using Angular-8/Spring/AWS for one of my project.

While making HTTP calls from the client, earlier I only needed to send the Authorization header and it worked well with the server.

Recently, my server expects me to send few custom headers (e.g x-request-time, x-correaltion-id etc). I have tried setting these headers to my request in an interceptor as below:

  const headers = this.getRequestHeaders();

  // cloning the request for updating the headers and url
  const authReq = req.clone({ headers, url: fullReqUrl });

  return next.handle(authReq).pipe(
     map(res => res),
     catchError(err => this.handlerError(err))
  );

and

 getRequestHeaders() {
      return new HttpHeaders( {
         'Authorization':  this.awsService.getAccessToken(),
         'x-request-time': 'new Date().toISOString()'
      // I am setting few more headers, skipping them here for simplicity
      });
   }

However, after doing this, I keep getting

Request header field x-request-time is not allowed by Access-Control-Allow-Headers in preflight response.

I have tried to research about the error and read multiple posts. I guess this one here explains it in detail. So I need to update my server with the setting to allow OPTION method and allow custom headers.

I checked and found that my server already does it. Here is what the server CORS filter look like:

@Component
@Order(1)
public class CORSFilter implements Filter{

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
        throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "*");

        chain.doFilter(req, res);
}

@Override
public void init(FilterConfig filterConfig) {}

@Override
public void destroy() {}

}

So the server allows all the methods and all the headers (*). Still I keep getting the following error.

What is the proper way to solve this issue. Am I missing something on client or server. Please help.

Arun Kamalanathan · Answer 1 · 2019-12-11T12:21:32.553

The line chain.doFilter(req, res); should be changed to chain.doFilter(req, response);. Because you are adding attributes to the casted object, but you are not using it.

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
        throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "*");

        chain.doFilter(req, response);
}

Error while adding more headers to a HTTP request

1 Answers1