$http.delete throwing error in angularJS

Question

I am making an api call to a Delete method like this -

$http.delete('http://localhost:45467/api/v1/proddetails/' + prodId, null )
    .success(function (data, status, headers, config) {
        if(data.status == "200")
        {
            console.log('data deleted');
        }
        deferred.resolve(data);
    })
    .error(function (data, status, headers, config) {
        console.log("some error occurred");
        deferred.reject(data);
    });

The delete endpoint looks like this -

[HttpDelete]
public HttpResponseMessage Delete(int productId)

When I run this and look into the Chrome console, I am presented with this error -

OPTIONS http://localhost:45467/api/v1/proddetails/34 
(index):1 XMLHttpRequest cannot load   
http://localhost:45467/api/v1/proddetails/34. No 'Access-Control-Allow-  
Origin' header is present on the requested resource. Origin 
'http://localhost:5100' is therefore not allowed access. The response had 
HTTP status code 405.

Can't seem to figure out what's wrong here. The other Get and Post requests are working fine. How to fix this?

Note1: I have CORS already enabled -

[EnableCors(origins: "*", headers: "*", methods: "*")]

Note2: I am making use of interceptors to add an auth token to each request. I am not sure if that is causing any issue.

Note3: This is how I define route in asp.net webapiconfig file -

config.Routes.MapHttpRoute(
            name: "ProdApi",
            routeTemplate: "api/v1/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

Thanks in advance.

looks like issue on server side http://stackoverflow.com/a/15619435/2435473 — Pankaj Parkar, Mar 23 '15 at 11:41
I am not sure what's going on. If anyone needs any info to dig into this, I can provide that. But this issues is going on weird level. — Sam, Mar 23 '15 at 12:45
did you try to delete record from chrome extention postman on local? — Pankaj Parkar, Mar 23 '15 at 12:49
I tried now, and it says - The requested resource does not support http method 'DELETE' — Sam, Mar 23 '15 at 12:55

score 2 · Accepted Answer · edited May 23 '17 at 12:18

I finally figured out what the problem was. Actually this post was helpful - PUT and Delete not working with ASP.NET WebAPI and Database on Windows Azure

I just needed to replace productId param to id - which is present in webapiconfig config. I am not sure why this works. Ideally I should be able to put any name for a parameter and not bound by what I put in route. Hope someone can explain this.

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

You're doing an HTTP request to a different domain than your page is on. The browser is blocking it for security reasons.

No 'Access-Control-Allow-Origin' header is present on the requested resource.

This question explains how to make DELETE http requests work with asp.net-web-api.

edited May 23 '17 at 10:29

Community

1
1

answered Mar 23 '15 at 10:33

Timothée Jeannin

8,322
2
49
62

I have CORS enabled. Like I said, GET and POST requests are working fine. – Sam Mar 23 '15 at 10:34
In the error Chrome gives you, we can read `No 'Access-Control-Allow-Origin' header` you may have a problem with your CORS configuration. Are you sure you're including the correct headers ? – Timothée Jeannin Mar 23 '15 at 10:36
Have set methods:"*" in CORS. – Sam Mar 23 '15 at 10:37
You may need to specify explicitly the allowed methods `GET, POST, PUT, DELETE, OPTIONS`. – Timothée Jeannin Mar 23 '15 at 10:42
Check this question for more details : http://stackoverflow.com/questions/12521499/cors-support-for-put-and-delete-with-asp-net-web-api – Timothée Jeannin Mar 23 '15 at 10:44

score 0 · Answer 3 · answered Nov 01 '15 at 14:40

0

Change $http.delete() to $http.del()

answered Nov 01 '15 at 14:40

Abdullah Khan

9,469
3
52
64

$http.delete throwing error in angularJS

3 Answers3