同源策略

首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。

对于同源必须要求URL在如下几个方面相同:

1. 网络协议(http与https不同)
2. 域名
3. 端口(80与8080不同)

JSONP

JSONP 是跨域访问的一种方法。在 web 开发中我们经常会引用第三方的 js 文件，这个时候我们会发现浏览器并没有拦截。 JSONP 就是利用向网页中添加 script 标签的方式去进行跨域访问。

一般处理在处理 JSONP 的时候会将回调函数名与参数作为 QueryString 传给服务端，服务端再根据上传的函数名生成 js 回传给客户端。

由于采用的是添加 script 标签的方式，所以 JSONP 只能通过 GET 方法访问服务器。另外由于服务端要根据上传的函数名生成 js ，所以 JSONP 方法得到的并不是数据，而是方法的调用。

在 Demo 中我写了一个 JSONP 的服务端生成与客户端调用方法。

CORS

对于CORSAccess-Control-Allow-Origin

引用System.Web.Http.Cors库

通过NuGet管理添加System.Web.Http.Cors,我引用的库名为:Microsoft ASP.NET Web API 2.2 Cross-Origin Support

引用库后，首先在 WebApiConfig.Register 方法中首行，添加一句 config.EnableCors() （记得一定要添加到首行。开始我也是添加在末行，但一直运行不成功，花了好半天功夫，才找到是这个问题。这个以后有时间再看看 Cors 内部的实现原理，按说不应该出现这样的问题。）。

public static void Register(HttpConfiguration config) 

 { 

// Web API 配置和服务

config.EnableCors(); 

// Web API 路由

config.MapHttpAttributeRoutes(); 

 

 config.Routes.MapHttpRoute( 

 name: "DefaultApi", 

 routeTemplate: "api/{controller}/{action}/{id}", 

 defaults: new { id = RouteParameter.Optional } 

); 

 } 

System.Web.Http.Cors 库对于 Cors 控制也是通过特性 (Attribute) 来实现的。 System.Web.Http.Cors 库提供了两个与 Cors 的特性： EnableCorsAttribute 与 DisableCorsAttribute ，这两个特性都是基于 Controller 与 Action 的。

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = false)] 

public sealed class DisableCorsAttribute : Attribute, ICorsPolicyProvider

 { 

public DisableCorsAttribute(); 

public Task<System.Web.Cors.CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken); 

 } 

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = false)] 

public sealed class EnableCorsAttribute : Attribute, ICorsPolicyProvider

 { 

public EnableCorsAttribute(string origins, string headers, string methods); 

public EnableCorsAttribute(string origins, string headers, string methods, string exposedHeaders); 

public IList<string> ExposedHeaders { get; } 

public IList<string> Headers { get; } 

public IList<string> Methods { get; } 

public IList<string> Origins { get; } 

public long PreflightMaxAge { get; set; } 

public bool SupportsCredentials { get; set; } 

 

public Task<System.Web.Cors.CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken); 

 } 

EnableCorsAttribute 与 DisableCorsAttribute 都实现了 ICorsPolicyProvider 接口。但 DisableCorsAttribute 没有别的属性与构造函数，它的使用场景大致为当 Controller 已经被添加 EnableCorsAttribute 后，为个别不做 Cors 的 Action 禁用掉。

EnableCorsAttribute 的与响应头部信息相对应 , 其对应关系如下：

还是IE

在测试过程中我发现在火狐上能够正常运行 , 但到了 IE 是就不行了 , 经过一番查找 , 发现要在要添加一句话：

jQuery.support.cors = true;

但加了这句话后，虽然 /api/demo/GetFigureByCors 可以调的 , 但 /api/demo/GetFigureNoCors 也可以调用了。到这又郁闷了，这又是要搞那样。又经过一番折腾，才发现这个时候 jQuery 并不是用的 XMLHttpRequest, 而是采用的 IE 自带的 XDomainRequest 组件 , 并且该组件只支持 IE8 及以上。

关于Demo

在 Demo 中出于对同源的规则的考虑，我定义了两个 Web 项目： API_15 与 API_15.Web 。 API_15 中的 DemoController 分别定义的三个方法 GetFigureByJsonP ， GetFigureNoCors ， GetFigureByCors 分别用于 JSONP ，非 Cors ， Cors 调用。

public class DemoController : ApiController

 { 

public HttpResponseMessage GetFigureByJsonP(string callback) 

 { 

StringBuilder result = new StringBuilder(); 

 

 result.Append("callback("); 

 result.Append(JsonConvert.SerializeObject(FigureManager.Figures)); 

 result.Append(")"); 

return new HttpResponseMessage(HttpStatusCode.OK) { Content = new StringContent(result.ToString()) }; 

 } 

 

public IEnumerable<Figure> GetFigureNoCors() 

 { 

return FigureManager.Figures; 

 } 

 

//[EnableCors(origins:"*",headers: "*",methods:"*")]

 [EnableCors(origins: "http://localhost:64299,http://www.baidu.com", headers: "GET,POST", methods: "*")] 

public IEnumerable<Figure> GetFigureByCors() 

 { 

return FigureManager.Figures; 

 } 

 }

在 API_15.Web 项目中只定义了一个页面，通过 jQuery 的 AJAX 去调用 API_15 中三个 Action 。

源码

Github: https://github.com/BarlowDu/WebAPI (API_15 ， API_15.Web )

原文：http://www.cnblogs.com/gangtianci/p/5027432.html