使Asp.net WebApi支持JSONP和Cors跨域访问
1.服务端处理
同源策略（Same Origin Policy）的存在导致了“源”自A的脚本只能操作“同源”页面的DOM，“跨源”操作来源于B的页面将会被拒绝。同源策略以及跨域资源共享在大部分情况下针对的是Ajax请求。同源策略主要限制了通过XMLHttpRequest实现的Ajax请求，如果请求的是一个“异源”地址，浏览器将不允许读取返回的内容。JSONP是一种常用的解决跨域资源共享的解决方案，现在我们利用ASP.NET Web API自身的扩展性提供一种“通用”的JSONP实现方案。
我们通过继承JsonMediaTypeFormatter定义了如下一个JsonpMediaTypeFormatter类型。它的只读属性Callback代表JavaScript回调函数名称，改属性在构造函数中指定。在重写的方法WriteToStreamAsync中，对于非JSONP调用（回调函数不存在），我们直接调用基类的同名方法对响应对象实施针对JSON的序列化，否则调用WriteToStream方法将对象序列化后的JSON字符串填充到JavaScript回调函数中。
我们重写了GetPerRequestFormatterInstance方法，在默认情况下，当ASP.NET Web API采用内容协商机制选择出与当前请求相匹配的MediaTypeFormatter后，会调用此方法来创建真正用于序列化响应结果的MediaTypeFormatter对象。在重写的这个GetPerRequestFormatterInstance方法中，我们尝试从请求的URL中得到携带的JavaScript回调函数名称，即一个名为“callback”的查询字符串。如果回调函数名不存在，则直接返回自身，否则返回据此创建的JsonpMediaTypeFormatter对象。
1.重写JsonMediaTypeFormatter处理JSONP请求
public class JsonpMediaTypeFormatter : JsonMediaTypeFormatter { public string Callback { get; private set; } public JsonpMediaTypeFormatter(string callback = null) { this.Callback = callback; } public override Task WriteToStreamAsync(Type type, object value, Stream writeStream, HttpContent content, TransportContext transportContext) { if (string.IsNullOrEmpty(this.Callback)) { return base.WriteToStreamAsync(type, value, writeStream, content, transportContext); } try { this.WriteToStream(type, value, writeStream, content); return Task.FromResult<AsyncVoid>(new AsyncVoid()); } catch (Exception exception) { TaskCompletionSource<AsyncVoid> source = new TaskCompletionSource<AsyncVoid>(); source.SetException(exception); return source.Task; } } private void WriteToStream(Type type, object value, Stream writeStream, HttpContent content) { JsonSerializer serializer = JsonSerializer.Create(this.SerializerSettings); using (StreamWriter streamWriter = new StreamWriter(writeStream, this.SupportedEncodings.First())) using (JsonTextWriter jsonTextWriter = new JsonTextWriter(streamWriter) { CloseOutput = false }) { jsonTextWriter.WriteRaw(this.Callback + "("); serializer.Serialize(jsonTextWriter, value); jsonTextWriter.WriteRaw(")"); } } public override MediaTypeFormatter GetPerRequestFormatterInstance(Type type, HttpRequestMessage request, MediaTypeHeaderValue mediaType) { if (request.Method != HttpMethod.Get) { return this; } string callback; if (request.GetQueryNameValuePairs().ToDictionary(pair => pair.Key, pair => pair.Value).TryGetValue("callback", out callback)) { return new JsonpMediaTypeFormatter(callback); } return this; } [StructLayout(LayoutKind.Sequential, Size = 1)] private struct AsyncVoid { } }
2.在网站启动注册
public class WebApiApplication : System.Web.HttpApplication { protected void Application_Start() { GlobalConfiguration.Configure(WebApiConfig.Register); //注册JSOPN提交处理 GlobalConfiguration.Configuration.Formatters.Insert(0, new JsonpMediaTypeFormatter()); } }
2.客户端实例
//使用Cors方式提交 $.get(apiUrl.getTwo("TestTwo"), { name: '张三' }, function (data) { alert(data); }); //使用Jsonp方式提交 $.ajax({ data: { name: 'zhangsan' }, url: apiUrl.getTwo('TestTwo'), dataType: 'jsonp', success: function (data) { alert(data); }, error: function (XMLRequest, textStatus) { console.info(XMLRequest); console.info(textStatus); alert('失败'); } });
分别的相应结果：