ASP.NET Web API <2> 跨域消费Web API（JSONP）

    在上一篇中简易的搭建了一个Web API 服务，包括前面几篇关于WCF REST服务的文章中，都未能提到如何跨域消费Web API，既然是跨域，自然想到JSONP跨域调用，这有篇文章《说说JSON和JSONP，也许你会豁然开朗，含jQuery用例》很清晰的说明了JSONP是干啥子用的，如何通过jQuery来进行JSONP跨域调用。好，既然这样，那就接上篇，也来试试看新建一个站点来消费我的Web API。

1、新建一个Asp.Net 网站项目，在默认的aspx文件中添加如下代码：

 $.ajax({
                    
                    async: false,
                    url: "http://localhost:6305/api/Customer/getcustomers?group=2",
                    type: 'GET',
                    dataType: 'jsonp',
                    success: function (data) {
                        var result = JSON.stringify(data);
                        alert(result);
                    },
                    error: function () {
                        alert('fail');
                    }
                });

好，直接按F5进入调试，以为万事OK，没想到，直接给我来了个fail。猜测是jQuery无法处理我Web API 直接返回的Json格式的数据，如何办才好呢，通过关键字 jQuery Jsonp进行搜索，没有任何有用信息，这件输入jsonp web api 进行搜索，还是stackoverflow强大，里面就有这样的一个问答：JSONP with ASP.NET Web API。通过这个问答，知道了JsonpMediaTypeFormatter，当然，问答中给出的JsonpMediaTypeFormatter已经是旧版本的了，通过其他进一步搜索，这里贴出的是4.5环境下的JsonpMediaTypeFormatter:

  namespace Thinktecture.Web.Http.Formatters
    {
        using System;
        using System.Collections.Generic;
        using System.IO;
        using System.Linq;
        using System.Net.Http.Formatting;
        using System.Net.Http.Headers;
        using System.Threading.Tasks;
        using System.Web;

        namespace API
        {
            public class JsonpMediaTypeFormatter : JsonMediaTypeFormatter
            {

                private string _callbackQueryParamter;

                public JsonpMediaTypeFormatter()
                {
                    SupportedMediaTypes.Add(DefaultMediaType);
                    SupportedMediaTypes.Add(new MediaTypeWithQualityHeaderValue("text/javascript"));

                    MediaTypeMappings.Add(new UriPathExtensionMapping("jsonp", DefaultMediaType));
                }

                public string CallbackQueryParameter
                {
                    get { return _callbackQueryParamter ?? "callback"; }
                    set { _callbackQueryParamter = value; }
                }

                public override System.Threading.Tasks.Task WriteToStreamAsync(Type type, object value, System.IO.Stream writeStream, System.Net.Http.HttpContent content, System.Net.TransportContext transportContext)
                {
                    string callback;
                    if (IsJsonpRequest(out callback))
                    {
                        return Task.Factory.StartNew(() =>
                        {
                            var writer = new StreamWriter(writeStream);
                            writer.Write(callback + "(");
                            writer.Flush();
                            base.WriteToStreamAsync(type, value, writeStream, content, transportContext).Wait();
                            writer.Write(")");
                            writer.Flush();
                        });
                    }
                    return base.WriteToStreamAsync(type, value, writeStream, content, transportContext);
                }

                private bool IsJsonpRequest(out string callback)
                {
                    callback = null;
                    switch (HttpContext.Current.Request.HttpMethod)
                    {
                        case "POST":
                            callback = HttpContext.Current.Request.Form[CallbackQueryParameter];
                            break;
                        default:
                            callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];
                            break;
                    }
                    return !string.IsNullOrEmpty(callback);
                }
            }
        }
    }

有了JsonpMediaTypeFormatter，只需注册即可。还是在Application_Start事件中注册：

        protected void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.MapHttpRoute("WebApi", "api/{controller}/{action}/{id}",
                                           new {id = RouteParameter.Optional});
           
            //注册JsonpMediaTypeFormatter
            var config = GlobalConfiguration.Configuration;
            config.Formatters.Insert(0, new JsonpMediaTypeFormatter());

          
        }

重新编译Web API,然后在次在另一个web中测试，总算盼来了想要的结果：

好了，收工完成。