27

I am using jersey as my restful api implementation. In the front end, I am using angularjs $http service to make http request. When I request a delete method I always got below error.

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

I read some articles and they say I need to allow delete on "Access-Control-Allow-Methods". I have setup the response filter as below but it still has such 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 the 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");
        });
Joey Yi Zhao
  • 30,508
  • 51
  • 183
  • 377

3 Answers3

36

After some testing, I found the solution. I put the allow method on the header as below, then it works. I don't know why "*" doesn't work.

headers.add("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
Joey Yi Zhao
  • 30,508
  • 51
  • 183
  • 377
  • Actually I ran into the same problem, but after taking a look into the documentation https://www.w3.org/TR/cors/#access-control-allow-methods-response-header I don't know how I could think that "*" could work for the allow-methods header. – JepZ Jan 14 '17 at 01:54
  • To be clear, this is added to the *server-side code* (for later readers of the answer). – Heretic Monkey Jan 06 '20 at 20:55
1

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

EDIT

This happens because angular adds X-Header keys in your request headers.

X-Headers generally define or set the operating parameters for the HTTP req/res

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

You can do this by using an interceptor while in your app config.

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.

atefth
  • 1,616
  • 13
  • 25
  • The thing is, in a production setting, you'll probably not be having this issue.. there's a very easy workaround but tell me if it's working in chrome now? – atefth Apr 03 '16 at 09:00
  • Unfortunately, it doesn't work. But why did you say I will not have such issue on production setting? – Joey Yi Zhao Apr 03 '16 at 14:39
  • Did you review my updated answer? Because in production, the client will be requesting from a different IP than the server where you'll be hosting it.. Thus.. no CORS issue.. It only happens when the request is from the same origin from where the file or response is being served or given... – atefth Apr 03 '16 at 15:01
  • It is not the case. The problem happens on the production environment. I deployed my application to AWS cloud and access it from different machines which got this issue. I think CORS is not related with production or dev mode, it happens when request from different origin. I deployed my server into two parts, one is servlet which serve as dynamic server; while the other is static nginx server which is served for front end. – Joey Yi Zhao Apr 04 '16 at 02:38
  • @ZhaoYi can you please add your angular config file? – atefth Apr 04 '16 at 04:33
  • I have added the angularjs code in my post. Please take a look at, thanks. – Joey Yi Zhao Apr 04 '16 at 04:36
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108130/discussion-between-atefth-and-zhao-yi). – atefth Apr 04 '16 at 04:46
1

The value " * " only counts as a special wildcard value for requests without credentials (requests without HTTP cookies or HTTP authentication information). In requests with credentials, it is treated as the literal method name "*" without special semantics.

Source : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods

kaizoku
  • 11
  • 1