前后端分离之CORS和WebApi
目前的项目是前端mv*+api的方式进行开发的，以前都是没有跨域的方案，前后端人员在同一个解决方案里边进行开发，前端人员要用IIS或VS来开发和调试Api,这样就很不方便，迫切需要跨域访问Api.
评选了很多解决方案最终选择，CORS+WebApi
cors科普：http://www.ruanyifeng.com/blog/2016/04/cors.html
cors网站：http://enable-cors.org/
mvc源码：https://github.com/ASP-NET-MVC/aspnetwebstack/blob/master/src/System.Web.Http.Cors/CorsMessageHandler.cs
快速入门可以看一些教程，自己要扩展源码是一条捷径.
示例代码：https://github.com/gutun/aspnet/tree/master/cors
1.新建WebApi项目实现CORS跨域
1.1 新建一个新的项目CrossDomain
1.2. 安装 Microsoft.AspNet.WebApi.Cors
Install-Package Microsoft.AspNet.WebApi.Cors
1.3. 配置App_Start目录下的 WebApiConfig文件
Config中要启用 CORS的支持我选择默认的MediaType为json方式。
1.4 新增UserController，在里边新增两个方法，get用来ping，代表url是通的，post模拟真正的数据提交，我们所有的api访问走post, request的入参和出参可以定义通用的实体。这里模拟post提交数据解析成UserInfo的实例。
2.JQuery Ajax跨域
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$.ajax({
url:'http://localhost:64542/api/user',
type:'POST',
data:{"Id":"1","Name":"张三"},
dataType:'json',
//Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
//contentType: 'application/json; charset=utf-8',
cache: false,
crossDomain: true,
success:function(data){
alert(data);
}
});
</script>
</body>
</html>
使用Nodejs本地服务器访问WebApi项目，成功的访问到了api/User,状态是200.
3.IE8,IE9支持CORS.
CORS在浏览器的支持情况，IE8和IE9是部分兼容，86%的浏览器是支持的，占了大部分，为了支持IE8和IE9我找到了一个补丁jquery.transport.xdr.min.js 用来弥补在IE8和IE9下的不足。
https://github.com/gfdev/javascript-jquery-transport-xdr.js
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!--[if (IE 8)|(IE 9)]>
<script src="http://cdn.rawgit.com/gfdev/javascript-jquery-transport-xdr/master/dist/jquery.transport.xdr.min.js"></script>
<![endif]-->
</head>
<body>
<script>
//http://www.ruanyifeng.com/blog/2016/04/cors.html
$.ajax({
url:'http://localhost:64542/api/user',
type:'POST',
data:{"Id":"1","Name":"张三"},
dataType:'json',
//Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
//contentType: 'application/json; charset=utf-8',
cache: false,
crossDomain: true,
success:function(data){
alert(data);
}
});
</script>
</body>
</html>
喜出往外，跑起来后遇到了，415错误，未识别的Content-Type,这是因为在IE8和IE9下，Content-Type为空造成的。
http://stackoverflow.com/questions/18964258/asp-web-api-post-request-with-cors-and-ie9-xdomainrequest-objec
新增DefaultContentTypeMessageHandler用来处理Request
using System.Net.Http; using System.Threading; using System.Threading.Tasks; using System.Web.Cors; using System.Web.Http.Cors; namespace CrossDomain { public class DefaultContentTypeMessageHandler : DelegatingHandler { protected async override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) { CorsRequestContext corsRequestContext = request.GetCorsRequestContext(); if (corsRequestContext != null) //判断是否是跨域的请求 { if (request.Method == HttpMethod.Post && request.Content.Headers.ContentType == null) //ConentType为空，使用默认值 request.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/x-www-form-urlencoded"); } var response = await base.SendAsync(request, cancellationToken); return response; } } }
再次更改WebApiConfig文件，在MessageHandlers管道中追加刚写的DefaultContentTypeMessageHandler，这样ContentType为空的跨域请求会使用默认的ContentType.
using System.Web.Http; using System.Web.Http.Cors; namespace CrossDomain { public static class WebApiConfig { public static void Register(HttpConfiguration config) { //新增CORS支持 var corsAttr = new EnableCorsAttribute("*", "*", "*"); config.EnableCors(corsAttr); //默认使用json格式，移除xml格式 config.Formatters.XmlFormatter.SupportedMediaTypes.Clear(); //处理Content-Type config.MessageHandlers.Add(new DefaultContentTypeMessageHandler()); // Web API configuration and services // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } } }
在chrome,IE8，IE9,IE10+上测试没有问题。
