AngularJS与ASP.NET WebAPI用户更新方法创建及405错误排查

Hey，我碰到过好几次这个405的问题，结合你的场景，大概率是这几个原因导致的，咱们一步一步排查解决：

核心原因分析 #

你看到的405 Method Not Allowed加上预检请求（preflight）失败，本质上是服务器不允许你发送的PUT/PATCH请求，要么是WebAPI没配置对应方法的路由，要么是跨域CORS没处理好，还有可能是IIS的WebDAV拦截了PUT请求。

1. 确认WebAPI编辑方法的HTTP特性配置 #

首先检查你的WebAPI控制器里的编辑方法，有没有显式声明[HttpPut]或者[HttpPatch]特性？默认情况下，ASP.NET WebAPI只会映射GET/POST请求，PUT这类方法需要手动标注：

// 示例：带HttpPut特性的编辑方法
[HttpPut]
[Route("api/Users/{id}")] // 确保路由和你前端请求的URL匹配
public IHttpActionResult UpdateUser(int id, UserModel updatedUser)
{
    // 你的编辑逻辑：查找用户、更新属性、保存到数据库
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }
    // ... 其他逻辑
    return Ok(updatedUser);
}

如果没加[HttpPut]，WebAPI找不到对应的处理方法，就会返回405。

2. 处理跨域CORS的预检请求 #

因为AngularJS在发送PUT/DELETE这类非简单请求时，会先发送一个OPTIONS类型的预检请求，确认服务器允许该操作。如果你的WebAPI没配置CORS，这个预检请求就会失败，导致405。

配置步骤： #

1. 先安装WebAPI的CORS包：

Install-Package Microsoft.AspNet.WebApi.CORS

2. 在WebApiConfig.cs里启用CORS：

using System.Web.Http;
using System.Web.Http.Cors;

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // 开发环境可以先允许所有域、方法、头（生产环境要替换成具体的域名）
        var corsSettings = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(corsSettings);

        // 你的其他路由配置...
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

3. 禁用IIS的WebDAV模块 #

IIS默认启用的WebDAV模块会拦截PUT请求，这是很多人踩过的坑！解决方法是在项目的web.config里添加以下配置，移除WebDAV模块和处理器：

<system.webServer>
  <modules runAllManagedModulesForAllRequests="true">
    <!-- 移除WebDAV模块 -->
    <remove name="WebDAVModule" />
  </modules>
  <handlers>
    <!-- 移除WebDAV处理器 -->
    <remove name="WebDAV" />
    <!-- 确保WebAPI的处理器能处理所有请求 -->
    <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  </handlers>
</system.webServer>

4. 检查AngularJS的请求代码 #

最后确认你的前端请求是不是用了正确的HTTP方法和URL：
比如你的userEdit方法里，应该用$http.put而不是$http.post，并且URL要包含用户ID（对应WebAPI的路由）：

$scope.userEdit = function () {
    console.log('edit');
    // 假设你已经拿到了要编辑的用户ID和更新后的数据
    var userId = // 你的用户ID逻辑
    var editedUser = // 编辑后的用户对象

    // 发送PUT请求
    $http.put('http://localhost:14539/api/Users/' + userId, editedUser)
    .then(function(response) {
        console.log('编辑成功:', response.data);
        // 刷新用户列表等后续操作
    }, function(error) {
        console.error('编辑失败:', error);
    });
};

如果你的请求用了POST或者URL没有带ID，也会导致服务器找不到对应的方法，返回405。

按照这几个步骤排查下来，应该就能解决你的编辑功能405错误了！

内容的提问来源于stack exchange，提问作者Oun