如何在离线2应用程序中使用param创建HTTP PUT到WebAPI?

时间:2016-07-26 12:16:17

标签: asp.net-web-api angular ionic-framework ionic2 http-put

我正在尝试使用整数参数为MVC WebApi创建HTTP PUT。

我尝试遵循HTTP PUT的角度2指南:https://angular.io/docs/ts/latest/guide/server-communication.html

我的WebApi:

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

我的Http PUT在我的离子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());
          });
     });
 }

最后从我的主页调用我的服务:

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

当我运行此操作时,我不允许使用405方法。有什么我想念的吗?

这里的UPDATE是我的web api中的web.config的一部分:

 <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> 

2 个答案:

答案 0 :(得分:1)

可能是Web Api错误,您可以通过将此代码添加到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" />

article可以为您提供有关405错误的更多信息。

答案 1 :(得分:0)

我能够解决问题,结果证明这是一个CORS问题。您可以在此处查看如何在Chrome中停用相同的来源政策:How to resolve CORS issue and JSONP issue in Ionic2

一旦我在chrome中禁用它,HTTP PUT就会成功。

这是我的最终代码:

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());
          });
     });
 }