Angular 2 Http delete with Headers for consuming with Web API REST

Question

I used Angular 2 Release and using Http and Headers from @angular/http.

I try call verb delete, with Headers, and the others verbs POST, GET and PUT, all right. But with "DELETE", don't work.

My code :

remove(url:string, id:any) {
   let headers = new Headers();
   headers.append('Authorization': 'Bearer ' + this.token);
   return this.http.delete(url, {
        headers: headers;
        body: { id: id }
   }).map(response => response.json());
}

A response received is: the requested resource does not support http method 'delete'.

In my controller I have some like this:

[HttpDelete]
public Task<HttpResponseMessage> Delete(int id)
{
    //..
}

Thanks for help me, regards !!

What's the url you're passing client side and the route on server side? — Claudio Redi, Nov 24 '16 at 19:33
I also guess this might be some url mistake. Make sure you debug and see if the url for delete is correct. Also, is your api in .net core? — jpgrassi, Nov 25 '16 at 08:46

score 2 · Accepted Answer · answered Dec 15 '16 at 17:05

The solution that worked for me was, use query string, in this way:

remove(urlController:string, id:any){
   let headers = new Headers();
   headers.append('Authorization': 'Bearer ' + this.token);
   return this.http.delete(urlController + '/?id=' + id, {
    headers: headers;
    }).map(response => response.json());
}

example:

remove(urlController:string, id:any){
   let headers = new Headers();
   headers.append('Authorization': 'Bearer ' + this.token);
   return this.http.delete('users'+ '/?id=' + '2', {
    headers: headers;
    }).map(response => response.json());
}

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

The problem is that your API server have to allow the HTTP DELETE Method. When you perform an HTTP DELETE Request, your browser send first an HTTP OPTIONS to the server; the server respond with an header Access-Control-Allow-Methods that contain the list of methods allowed.

you have to send an OPTION Response Header like this:

Access-Control-Allow-Methods: DELETE

Read more here: CORS support for PUT and DELETE with ASP.NET Web API

score 0 · Answer 3 · answered Feb 10 '17 at 16:29

0

I use custom httpService extends from http and I faced the some problem, I just change url string, this is work for me:

this.httpService.delete(`${API_URL}Favorites/${id}`)

answered Feb 10 '17 at 16:29

Burhan Mubarok

358
2
8

Angular 2 Http delete with Headers for consuming with Web API REST

3 Answers3