随着ASP.NET web API的深入使用，我们可能会考虑在项目中把前端业务分成更多的细节。例如，前端项目使用Angularjs作为UI，而数据则由另一个Web Api网站项目支持。注意，这里有两个网站项目。前端项目主要负责接口呈现和一些前端业务逻辑处理，而Web Api则负责提供数据。

这就是问题所在。如果前端通过ajax访问Web Api项目，就会涉及跨域。我们知道，如果直接访问，一般情况下是Web Api不允许的，这就涉及到安全问题。因此，我们今天文章的主题是讨论和演示如何配置Web Api以支持跨域访问(Cors)。好了，让我们用一个简单的例子直接进入本文的主题。

首先，打开Visual Studio 2013，创建一个名为CrossDomainAccessWebAPI的空白解决方案。

然后创建一个名为CrossDomainAccess.WebAPI的空Web Api项目。

然后，我们右键单击刚刚创建的解决方案，并创建一个空的Web项目来模拟我们的网站对WebAPI项目的跨域调用，如下所示：

完成上述步骤后，我们的解决方案目录如下图所示：

让我们通过模拟网站的Web项目中的Nuget添加jQuery。添加jQuery包的界面如下：

添加后，我们已经完成了这里的准备工作。在下面WebAPI项目的Models文件夹中添加一个实体类UserInfo，具体代码如下：

使用系统；使用系统。集合。通用；使用系统。Linq使用系统。Web命名空间交叉域访问。模型{公共类UserInfo {公共int Id { get设置；}公共字符串UserName { get设置；}公共字符串UserPass { get设置；}公共字符串Email { get设置；}公共DateTime RegTime { get设置；}}}然后在WebAPI项目中添加一个示例控制器：UserInfoController，用于返回数据集合。具体代码如下：

使用系统；使用系统。集合。通用；使用系统。Linq使用System.Net；使用系统。Net . Http使用系统。Web . Http使用交叉域访问。模型；用于获取用户信息集合的命名空间crossdomainaccession . web API . controllers { public class user info controller : API controller {///summary///方法////summary ////。Returns返回用户信息集合/returns public ihttpacktionresult getlist(){//对象集合模拟数据listsuserinfo list=newlistsuserinfo(){ id=1，UserName=' Zhang San '，userpass=' fdasdfas '，email=' [email protected]'，regtime=datetime.now}，newuserinfo () {id=2，username=' Li si '，UserPass='FDASDFAS '，email=' [email protected]'，regtime=datetime.now}，new userinfo () {id=3， newuserinfo () {id=4，用户名='刘钊'，userpass=' fdasdfas '，email=' [email protected]'，Regtime=datetime.now}，newuserinfo () {id=5，用户名='天齐'，userpass=' fdasdfas '，email=' [email protected]'，regtime=datetime.now}，Userinfo () {id=6，用户名='乌龟'，userpass=' fdasdfas '，email=' [email protected]'，regtime=datetime.now } } 返回Ok(列表)；}}}然后我们需要在App_Start目录下的WebApiConfig.cs文件中修改webapi的路由规则，这样就可以通过api/{controller}/{action}进行访问，同时还需要修改序列化方式，这样WebAPI就可以默认输出json格式的数据。具体操作如下：

使用系统；使用系统。集合。通用；使用系统Linq .使用系统. Net。Http。格式化使用系统网络。超文本传送协议（Hyper Text Transport Protocol的缩写）命名空间交叉域访问WebAPI ,{ 0公共静态类WebApiConfig {公共静态void Register(HttpConfiguration config){//Web API配置和服务//Web API路由配置maphttpattributorates配置路线。MapHttpRoute(名称： ' DefaultAPI '，Routetemplates : ' API/{ controller }/{ action }/{ id } '，默认值3360 new { id=RouteParameter .可选});//清除所有序列化格式配置。格式化程序。清除();//添加数据格式的序列化器配置。格式化程序。添加（新的jsonmediatyformatter())；} }}重新生成一下项目，并在浏览器中访问，这时我们可以的到数据格式的数据，如下：

复制代码代码如下：[{'Id':1，' UserName': '张三，' UserPass':'FDASDFAS '，' Email':'[emailprotected]，' RegTime ' : ' 2016-04-21t 10:36336050.7800569 ' 08:00 ' }，{'Id':2，' UserName': '李四，' UserPass':'FDASDFAS '，' Email':'[emailprotected]，' RegTime ' : ' 2016-04-21t 10:36336050.7800569 ' 08:00 ' }，{'Id':3，' UserName': '王五，' UserPass':'FDASDFAS '，' Email':'[emailprotected]，' RegTime ' : ' 2016-04-21t 10:36336050.7800569 ' 08:00 ' }，{'Id':4，' UserName': '赵六，' UserPass':'FDASDFAS '，' Email':'[emailprotected]，' RegTime ' : ' 2016-04-21t 10:36336050.7800569 ' 08:00 ' }，{'Id':5，' UserName': '田七，' UserPass':'FDASDFAS '，' Email':'[emailprotected]，' RegTime ' : ' 2016-04-21t 10:36336050.7800569 ' 08:00 ' }，{'Id':6，' UserName': '王八，' UserPass':'FDASDFAS '，' Email':'[emailprotected]，' RegTime ' : ' 2016-04-21t 10:36336050.08:00 ' }]

好了，到这里我们互联网连结编程界面端的数据输出就准备好了。为了测试是否可以跨域访问，我们再转到CorsDemo .用户界面网站项目中。首先创建一个index.aspx页面（这个命名自己可以任意取)后打开，修改成如下的代码：

% @ Page Language=' c# ' AutoEventWireup=' true '代码在=' index '之前。aspx。cs ' Inherits=' cross domain accession .网站。索引"%!DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title script src=' http : script/jquery-2。2 .3 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # getData ')).单击(函数(){ $).Ajax({ URL : ' http://localhost :29867/API/UserInfo/getlist '，dataType: 'json '，成功：函数（数据){ //以表格的形式在浏览器控制台显示数据，IE下不支持console.table(数据);} });});});/脚本/流浆池表单id='form1' runat='server' div输入类型='按钮'值='跨域获取数据id=' GetDATa '/div/form/body/html完成以上步骤以后，启动网络应用程序接口项目和网项目，并在网项目的索引页面中点击跨域获取数据按钮，打开浏览器控制台查看请求结果，在控制台会出现如下结果：

控制台提示我们跨域请求被阻止，同时提示克-奥二氏分级量表头部信息确实，所以我们可以通过去网络应用程序接口配置克-奥二氏分级量表来让其支持跨域访问。

那现在我们在网络应用程序接口项目中通过框架添加微软. AspNet。WebApi.Cors，然后在WebApiConfig.cs文件中配置HttpConfiguration的启用克-奥二氏分级量表方法即可。具体操作如下：

使用系统；使用系统。集合。通用；使用系统Linq .使用系统. Net。Http。格式化使用系统网络。超文本传送协议（Hyper Text Transport Protocol的缩写）使用系统网络。Http。克-奥二氏分级量表命名空间交叉域访问WebAPI ,{ 0公共静态类WebApiConfig {公共静态void Register(HttpConfiguration config){//Web API配置和服务EnableCrossSiteRequests(配置);//Web API路由配置maphttpattributorates配置路线。MapHttpRoute(名称： ' DefaultAPI '，Routetemplates : ' API/{ controller }/{ action }/{ id } '，默认值3360 new { id=RouteParameter .可选});//清除所有序列化格式配置。格式化程序。清除();//添加数据格式的序列化器配置。格式化程序。添加（新的jsonmediatyformatter())；} ///摘要///允许跨域调用////summary////param name=' config '/param private static void enablecrossiterequests(Httpconfiguration config){//对所有的请求来源没有任何限制var CORS=new enable correct attribute(origins : ' *，headers: ' *，methods : ' *)；配置使能CORS(CORS)；} }}

现在，我们再重新生成网络应用程序接口项目并运行，接着在页面http://localhost :31521/index。文件中点击按钮"跨域获取数据",通过萤火虫的控制台，我们可以看到数据跨域加载成功了，如下：

更多精彩内容，请点击《ajax跨域技术汇总》 ,进行深入学习和研究。

至此，关于ASP .Net Web Api支持跨域请求的示例和演示就完成了，谢谢大家的阅读。