如何在 ionic 2 应用程序中使用参数将 HTTP PUT 发送到 WebAPI？

Question

我正在尝试将带有整数参数的 HTTP PUT 发送到 MVC WebApi。

我尝试遵循 angular 2 条 HTTP PUT 准则：https://angular.io/docs/ts/latest/guide/server-communication.html

我的 WebApi：

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

我在 ionic 2 应用程序中的服务中的 Http PUT：

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.config 的一部分 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

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

Answer 2

我能够解决这个问题，结果证明这是一个 CORS 问题。您可以在 Chrome 此处查看如何禁用同源策略：

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

如何在 ionic 2 应用程序中使用参数将 HTTP PUT 发送到 WebAPI？

How to make an HTTP PUT with a param in an ionic 2 app to a WebAPI?

asp.net-web-api

angular

ionic-framework

ionic2

http-put