Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers in preflight response

Question

I'm using Angular in the frontend and Jersey for backend. I am getting an exception when I execute my PUT request. This is the Angular code:

const header=new Headers({'Content-Type':'application/x-www-form-urlencoded'});
header.append("Access-Control-Allow-Methods", "POST");
header.append("Access-Control-Allow-Headers","Access-Control-Allow-Origin");

return this.http.post('http://localhost:8080',home,{headers: header})
    .pipe(map((response: Response)=>{return response.json();}));

This is my filter in Jersey:

@Provider
public class CORSResponseFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext)
            throws IOException {

        responseContext.getHeaders().add("Access-Control-Allow-Origin", "*");
        //headers.add("Access-Control-Allow-Origin", "http://podcastpedia.org"); podcastpedia.org       
        responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS");          
        responseContext.getHeaders().add("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); 
    }

}

This is the exception:

Failed to load http://localhost:8080/ Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers in preflight response

Anyone can help me?

Answer 1

Remove the Access-Control-Allow-Methods and the Access-Control-Allow-Headers from the HttpHeaders in the frontend code. These headers are supposed be sent as response headers from the server (which is what you are doing in your CORSResponseFilter).

Failed to load http://localhost:8080/ Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers in preflight response

What this error is saying is that the server response header Access-Control-Allow-Headers doesn't include Access-Control-Allow-Methods in the header value (which is shouldn't). The purpose of the Access-Control-Allow-Headers is to tell the browser which request headers the client is allowed to send to the server. You can see in the CORSResponseFilter which headers you allow. Access-Control-Allow-Methods is not one of them.

And while your at it, you might as well remove all the Access-Control-XX-XX values in the Access-Control-Allow-Headers response header. These are not required. You are saying that client can send these request headers, which it shouldn't be doing.

See also:

• Check out the update in this answer for a good explanation about how these headers work (if you are interested).