angualJS client call web api 2 via CROS/

Question

User-747575847 posted

Hi,

I have faced a problem since last Sunday,  two projects were created, one is web api 2, other is client 

now I try to call my web api by angularjs, all methods are work except delete method. I always get a error message as '405 (Method Not Allowed)' 'The requested resource does not support http method 'DELETE'."'

I searched a lot of articles and try a kind of solutions, but the issue still in there.

my code as following:

client side:

  $scope.delRole = function (idx) {
            $http({
                url: 'http://localhost:56075/api/role/',
                method: 'DELETE',
                data: { RoleId: $scope.roles[idx].RoleID },
                headers: { "Content-Type": "application/json;charset=utf-8" }
            }).then(function (res) {
                console.log(res.data);
            }, function (error) {
                console.log(error);
            });
        };

web api: 

web.config

 <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="FormsAuthentication" />
      <remove name="WebDAVModule"/>
    </modules>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
  </system.webServer>

controller:

   // DELETE: api/Role/5
        [ResponseType(typeof(Role))]
        [HttpDelete]
        public async Task<IHttpActionResult> DeleteRole(int id)
        {
            Role role = await db.Roles.FindAsync(id);
            if (role == null)
            {
                return NotFound();
            }

            db.Roles.Remove(role);
            await db.SaveChangesAsync();

            return Ok(role);
        }

Response Header:

Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Allow:GET,POST
Cache-Control:no-cache
Content-Length:75
Content-Type:application/json; charset=utf-8
Date:Tue, 26 Jan 2016 02:54:06 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/8.0
X-AspNet-Version:4.0.30319
X-SourceFiles:=?UTF-8?B?RjpcU291cmNlIENvZGVcVE1TV2ViQXBpXFRNU1dlYkFwaVxhcGlccm9sZVw=?=

Reuqest Headers:

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4
Connection:keep-alive
Content-Length:12
Content-Type:application/json;charset=UTF-8
Host:localhost:56075
Origin:http://localhost:52164
Referer:http://localhost:52164/User/RoleEdit
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.82 Safari/537.36

Thanks for help !!