Comment faire un HTTP PUT avec un param dans une application 2 ionique à un WebAPI?

Question

J'essaye de faire un HTTP PUT avec un paramètre entier à un MVC WebApi.

J'ai essayé de suivre les 2 directives angulaires pour HTTP PUT: https://angular.io/docs/ts/latest/guide/server-communication.html

Mon WebAPI:

public IHttpActionResult Put([FromBody]int id) 
{ 
    return Ok(); 
} 

Mon PUT Http à mon service dans mon application ionique 2:

makePut(){ 
    let body = JSON.stringify({id:155320}); 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    return new Promise(resolve => { 
     this.http.put('API_URL', body, options) 
     .subscribe(
      response => { 
      console.log(response.text()); 
      }, 
      error => { 
      //Failed to Login. 
      alert(error.text()); 
      console.log(error.text()); 
      }); 
    }); 
} 

Et enfin l'appel à mon service depuis ma page d'accueil:

this.service.makePut().then(data => {console.log(data);}); 

Lorsque j'exécute ceci, j'obtiens une méthode 405 non autorisée. Y a-t-il quelque chose qui me manque?

mise à jour ici fait partie du web.config dans mon web api:

<system.webServer> 
    <security> 

    </security> 
    <validation validateIntegratedModeConfiguration="false" /> 
    <modules runAllManagedModulesForAllRequests="true"> 
     <remove name="WebDAVModule" /> 
    </modules> 
    <httpProtocol> 
     <customHeaders> 
     <add name="Access-Control-Allow-Origin" value="*" /> 
     <add name="Access-Control-Allow-Headers" value="Content-Type" /> 
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 
     </customHeaders> 
    </httpProtocol> 
    <handlers> 
     <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" /> 
     <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" /> 
     <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
     <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" /> 
     <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" /> 
     <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
    </handlers> 

    </system.webServer> 

Answer 1

J'ai été capable de résoudre le problème, qui s'est avéré être un problème CORS. Vous pouvez voir comment désactiver la même politique d'origine dans Chrome ici: How to resolve CORS issue and JSONP issue in Ionic2

Une fois que je l'ai désactivé en chrome, le HTTP PUT réussit.

Voici mon code final:

makePut(){ 
    let body = 155320; // this is different 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    return new Promise(resolve => { 
     this.http.put('API_URL', body, options) 
     .subscribe(
      response => { 
      console.log(response.text()); 
      }, 
      error => { 
      //Failed to Login. 
      alert(error.text()); 
      console.log(error.text()); 
      }); 
    }); 
} 

Answer 2

Il est peut-être une erreur de Web et vous api peut résoudre en ajoutant que ce code à votre fichier web.config

<handlers accessPolicy="Read, Script"> 
    <remove name="WebDAV" /> 
    <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" /> 
    <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" 
     path="*." 
     verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" 
     modules="IsapiModule" 
     scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" 
    preCondition="classicMode,runtimeVersionv4.0,bitness64" 
    responseBufferLimit="0" /> 

ce article peut vous donner plus d'informations sur l'erreur 405.