如何在 ionic 2 应用程序中使用参数创建 HTTP PUT 到 WebAPI？

Question

我正在尝试为 MVC WebApi 创建一个带有整数参数的 HTTP PUT。

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

我的 WebApi：

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

我的 Http PUT 在我的 ionic 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 方法。我有什么遗漏吗？

这里的更新是我的 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> 

Answer 1

我能够解决这个问题，结果证明这是一个 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());
          });
     });
 }

Answer 2

这可能是 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错误的信息。