.NET MVC 兼容不支持 PUT/DELETE 的浏览器

• 前端：ASP.NET MVC
• 后端：.NET WebAPI

在系统中，老是有客户抱怨，某某地方修改不了啊、某某记录删不掉啊、……

经过 N 次测试，发现问题主要集中在 Restful 的 PUT 或 DELETE 请求的时候。

但是 Chrome 貌似全部功能都是可用的，看来，是浏览器支持的问题，简单记录一下解决方法吧，懒得去统计哪些浏览器不支持了。

先说一句，如果是 Java 的童鞋，如果使用的是 SpringMVC，那恭喜你了，该框架已经带了该兼容方法的支持了，具体的，可以自行百度，也可以看这里。

方案：客户端统一 POST 提交，API 端重写 HTTP Method

首先，继承 DelegatingHandler，重写方法，代码如下：

using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Threading;
using System.Threading.Tasks;

namespace Test.Web
{
    /// 

    /// 兼容不支持 PUT/DELETE 方法的浏览器
    /// 
    public class TestHTTPHandler : DelegatingHandler
    {
        protected override Task SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
        {
            IEnumerable methods;

            // 在 ajax 的 header 中添加 _method 标记，标明真实的请求方法
            // 如果没有该标记或为空，就使用原本的请求方法
            if (request.Headers.TryGetValues("_method", out methods))
            {
                var method = methods.First();

                if (!string.IsNullOrWhiteSpace(method))
                {
                    request.Method = new HttpMethod(method);
                }
            }

            return base.SendAsync(request, cancellationToken);
        }
    }
}

然后，在 Global.asax 中，注册该方法，代码如下：

// …… 其它 using
using System.Web.Http;

void Application_Start(object sender, EventArgs e)
{
    // …… 其它代码 ……

    // 兼容不支持 PUT/DELETE 方法的浏览器
    GlobalConfiguration.Configuration.MessageHandlers.Add(new TestHTTPHandler());
}

最后，在 Javascript 中，发送 ajax 请求如下（以 jQuery 为例）：

// POST 请求
$.post('http://api.xxxx.com/xxxx', data, function (result) {
    // 业务处理逻辑
});

// PUT 请求
$.ajax({
    url: 'http://api.xxxx.com/xxxx',
    type: 'POST',   // 统一 POST 请求
    headers: { _method: 'PUT' },   // 标明真实的 PUT 方法
    data: data,
    success: function (result) {
        // 业务处理逻辑
    }
});

// DELETE 请求
$.ajax({
    url: 'http://api.xxxx.com/xxxx/{id}',
    type: 'POST',   // 统一 POST 请求
    headers: { _method: 'DELETE' },   // 标明真实的 DELETE 方法
    success: function (result) {
        // 业务处理逻辑
    }
});

至此，全部功能实现完毕。