Angular 5; asp.net web api http.delete doesn't work

Question

I have asp.net web api server run in debug made and separate project uses Angular 5 - 5.2.11.

I try to delete data and I can't, but when I use postman it work.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';

@Injectable()
export class UserService { private getUserSucess: any;

  private  _headers =  {
    headers: new HttpHeaders().set('Content-Type', 'application/json')
  };

  private headers={
    headers: new HttpHeaders({
   'Content-Type': 'application/json'
    });
  }

  constructor(private http: HttpClient) { }

  deletUserHttp() {
    return this.http.delete( 'http://localhost:52817/api/users/1' ).subscribe(deleteSucess.bind(this), deleteError.bind(this));


 function deleteSucess(resp) {
   debugger;
   return resp;
 }
 function deleteError(resp) {
  //resp = HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, 
  debugger;
  return resp;
 }
}

I also try with: this._headers and this.headars the result was the same:

HttpErrorResponse { headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false,

405 Method Not Allowed:

Request URL: http://localhost:52817/api/users/1
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: [::1]:52817
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin: *
Allow: GET,PUT,DELETE
Cache-Control: no-cache
Content-Length: 71
Content-Type: application/json; charset=utf-8
Date: Sat, 16 Jun 2018 05:43:07 GMT
Expires: -1
Pragma: no-cache
Server: Microsoft-IIS/10.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
X-SourceFiles: =?UTF-8?B?
QzpcVXNlcnNcQmV0bWlyYVxzb3VyY2VccmVwb3NcVXNlcnNcVXNlcnNcYXBpXHVzZXJzXDE=?= Accept: /
Accept-Encoding: gzip, deflate, br
Accept-Language: pl-PL,pl;q=0.9,en-US;q=0.8,en;q=0.7,de;q=0.6
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: DELETE Connection: keep-alive Host: localhost:52817 Origin: http://localhost:4200 User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36

web.config:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />       
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />    
        </customHeaders>
    </httpProtocol>
    <rewrite>
        <outboundRules>
            <clear />
            <rule name="AddCrossDomainHeader">
                <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
                <conditions logicalGrouping="MatchAll" trackAllCaptures="true">
                    <add input="{HTTP_ORIGIN}" pattern="(http(s)?://((.+\.)?domain1\.com|(.+\.)?domain2\.com|(.+\.)?domain3\.com))" />
                </conditions>
                <!--<match serverVariable="RESPONSE_Access-Control-Allow-Methods" pattern="GET, POST, PUT, DELETE, OPTIONS" />
                <conditions logicalGrouping="MatchAll" trackAllCaptures="true">
                    <add input="{HTTP_ORIGIN}" pattern="(http(s)?://((.+\.)?domain1\.com|(.+\.)?domain2\.com|(.+\.)?domain3\.com))" />
                </conditions>-->
                <action type="Rewrite" value="{C:0}" />
            </rule>
        </outboundRules>
    </rewrite>
...

Please help me because I really don't know what is wrong.

Answer 1

Please refer to this document for enabling CORS for your asp.net webapi. Once CORS is enabled you should be able to delete using Angular app.