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?

Solution

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).

Comments

[Admin]

stackoverflow.com/q/32500073/1531971

[Doflamingo19]

@jdv is not the correct answer because I need to resolve "Request header field Access-Control-Allow-Methods "

[Admin]

You need to be clear about how this Q&A about this exact same message you report is not relevant as part of your research. See How to Ask, but it is your responsibility to do some basic research, including any other Q&A, and tell us how they do not apply in this case. This should be in the text of the question via an edit.

[JohnnyAW]

This is the right answer to your question, angular try to perform an options request but your server doesn’t provide right headers for this kind of requests...

[Doflamingo19]

@JohnnyAW which are the correct header?