ASP NET Web API POST / DELETE（Angular 6 HttpClient-）請求返回：405不允許使用方法

Question

我使用ASP.NET Web API作為后端以及前端中的Angular 6，使用Visual Studio 15創建了一個應用程序。 我只是想根據數據庫中的數據在前端中顯示/添加/刪除用戶。 我在Angular 6中使用HttpClient進行了管理，並且GET-Request顯示用戶數據工作正常。 我試圖以相同的方式實現POST / DELETE請求。 這是來自Angular的電話：

deleteUser(id: number): Observable<{}> {
    const url = `${this.userURL}/${id}`;
    return this.http.delete(url, { withCredentials: true })
        .pipe(
            catchError(this.handleError('deleteData'))
        );
}

Web API：我在Global.asax.cs中處理了預檢請求：

void Application_PreSendRequestHeaders(Object sender, EventArgs e)
    {
        var origin = Request.Headers.Get("Origin");
        var validOrigins = ConfigurationManager.AppSettings["allowedCorsOrigins"].Split(',');
        if (validOrigins.Any(o => o == origin))
        {
            Response.StatusCode = (int)HttpStatusCode.OK;
            Response.Headers.Set("Access-Control-Allow-Origin", origin);
            Response.Headers.Set("Access-Control-Allow-Credentials", "true");
            Response.Headers.Set("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, access-control-allow-credentials, access-control-allow-headers, access-control-allow-methods, access-control-allow-origin, ontent-type, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization"); // "Content-Type, Accept, Authorization, withcredentials, Prefer"
            Response.Headers.Set("Access-Control-Expose-Headers", "Claims, *");
            Response.Headers.Set("Access-Control-Allow-Methods", "GET,PUT,POST,OPTIONS,PATCH,DELETE");
        }
    }

WebApiConfig.cs：

 public static void Register(HttpConfiguration config)
        {

            // enable Cors
            var cors = new EnableCorsAttribute("http://localhost:4200", "*", "GET, POST, PUT, DELETE, OPTIONS"){ SupportsCredentials = true};
            config.EnableCors(cors);
            // ...

            config.MapHttpAttributeRoutes();
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
         }

控制器中自動生成的刪除功能：UserController.cs：

// DELETE: api/User/5
    [HttpDelete]
    [ResponseType(typeof(User))]
    public async Task<IHttpActionResult> DeleteUser(decimal id)
    {
        User user = await db.User.FindAsync(id);
        if (user == null)
        {
            return NotFound();
        }

        db.User.Remove(user);
        await db.SaveChangesAsync();

        return Ok(user);
    }

web.config.cs：

<appSettings>
   <add key="webpages:Version" value="3.0.0.0" />
   <add key="webpages:Enabled" value="false" />
   <add key="ClientValidationEnabled" value="true" />
   <add key="UnobtrusiveJavaScriptEnabled" value="true" />
   <add key="allowedCorsOrigins" value="http://localhost:4200" />
   <add key="allowedCorsMethods" value="GET, POST, PUT, DELETE, OPTIONS, BATCH" />
   <add key="allowedCorsHeaders" value="*" />
</appSettings>
<system.web>
   <compilation debug="true" targetFramework="4.5.2" />
   <httpRuntime targetFramework="4.5.2" />
   <httpModules>
     <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" />
   </httpModules>
</system.web>
<system.webServer>
   <validation validateIntegratedModeConfiguration="false" />
   <modules runAllManagedModulesForAllRequests="true">
     <remove name="WebDAVModule" />
     <remove name="ApplicationInsightsWebTracking" />
     <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler" />
   </modules>
   <handlers>
     <remove name="WebDAV" />
     <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
     <remove name="OPTIONSVerbHandler" />
     <remove name="TRACEVerbHandler" />

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

如果我在客戶端瀏覽器中按F12打開開發工具，則預檢請求的Web API響應代碼，最后DELETE請求為預期的200，但是如果我在Visual Studio中單擊“應用程序見解”，則響應代碼為預檢為401，對於DELETE為405。因此，不會刪除用戶。

客戶：

• 選項-200

• 刪除-200

服務器：（在Applications Insights中）

• 選項-401

• 刪除-405

我在stackoverflow上看了幾個類似的問題，但是給定的解決方案並沒有影響或解決我的問題。 如果需要，我可以提供更多源代碼。 提前致謝。

Answer 1

我僅通過在[HttpDelete]下插入[Route("api/User/{id}")] [HttpDelete] 。 現在，UserController.cs中的刪除功能如下所示：

[HttpDelete]
[Route("api/User/{id}")]
[ResponseType(typeof(User))]
public async Task<IHttpActionResult> DeleteUser(decimal id)
{
    ...
}

Answer 2

我對此不太確定，但是您可以嘗試將函數簽名更改為DeleteUser(int id) （老實說，十進制id參數看起來很煩人:)）並檢查配置文件的路由模板（ routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ），以與您的參數名稱（在本例中為id）匹配。 希望這能解決您的問題。