Always got DELETE method not allowed by access-permission control methods in preflight response

Question

I use jersey as my soothing api implementation. In the interface, I use angularjs $ http service to make an http request. When I request a delete method, I always got the error below.

"Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response." 

I read several articles and they say that I need to allow deletion in "Access-Control-Allow-Methods". I have configured the response filter as shown below, but it still has such a problem. What else should I do?

 @Provider public class CORSResponseFilter implements ContainerResponseFilter { @Override public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException { MultivaluedMap<String, Object> headers = responseContext.getHeaders(); headers.add("Access-Control-Allow-Origin", "*"); headers.add("Access-Control-Allow-Methods", "*"); } } 

below is my angular code to make a request:

 $http({ method: 'DELETE', url: remoteUrl, headers : {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', 'ACCESS_TOKEN' : $cookieStore.get("access_token") }, data : $httpParamSerializer({ 'id':id }) }).success(function(data,status,headers,config) { $scope.refreshDepartments(); console.log(data); alert("success"); }).error(function(data,status,headers,config){ console.log(data); alert("error"); }); 

Answer 1

After some testing, I found a solution. I put the allow method in the header as shown below, then it works. I do not know why the "*" does not work.

 headers.add("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE"); 

Answer 2

Try using the CORS extension for chrome, it helped me once.

EDIT

This is because angular adds the X header keys to the request headers.

X headers usually specify or set operating parameters for HTTP req / res

You can fix this by changing the Content-Type of your requests to "text / plain" or "application / x-www-form-urlencoded" or "multipart / form-data".

You can do this using an interceptor while setting up your application.

EDIT

Add this to your server code -

 header('Access-Control-Allow-Headers: X-Requested-With'); 

Try changing the content type to text / plain

Hope this helps.