支持Ajax跨域访问ASP.NET Web Api 2(Cors)的示例教程
随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细。比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑。注意,这里是两个Web网站项目了,前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理,而Web Api则负责提供数据。
这样问题就来了,如果前端通过ajax访问Web Api项目话,就涉及到跨域了。我们知道,如果直接访问,正常情况下Web Api是不允许这样做的,这涉及到安全问题。所以,今天我们这篇文章的主题就是讨论演示如何配置Web Api以让其支持跨域访问(Cors)。好了,下面我们以一个简单的示例直接进入本文的主题。
首先打开Visual Studio 2013,创建一个空白的解决方案,命名为:CrossDomainAccessWebAPI。
再创建一个空的Web Api项目,命名为:CrossDomainAccess.WebAPI
接着我们右键单击刚才创建的解决方案,创建一个空的Web项目用来模拟我们的网站对WebAPI项目进行跨域调用,如下:
完成以上步骤以后,我们的解决方案目录如下图所示:
下面我们在模拟网站的Web项目中通过Nuget添加jQuery,一下是添加jQuery包的界面:
添加完成后,到这里我们就完成了前期的准备工作。下面在WebAPI项目的Models文件夹中添加是一个实体类UserInfo,具体代码如下:
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace CrossDomainAccess.WebAPI.Models { public class UserInfo { public int Id { get; set; } public string UserName { get; set; } public string UserPass { get; set; } public string Email { get; set; } public DateTime RegTime { get; set; } } }
然后在WebAPI项目中添加一个示例控制器:UserInfoController,这个控制器用来返回数据集合,具体代码如下:
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using CrossDomainAccess.WebAPI.Models; namespace CrossDomainAccess.WebAPI.Controllers { public class UserInfoController : ApiController { /// <summary> /// 获取用户信息集合的方法 /// </summary> /// <returns>返回用户信息集合</returns> public IHttpActionResult GetList() { //对象集合模拟数据 List<UserInfo> list = new List<UserInfo>() { new UserInfo() { Id = 1, UserName = "张三", UserPass = "FDASDFAS", Email = "zhangsan@163.com", RegTime = DateTime.Now }, new UserInfo() { Id = 2, UserName = "李四", UserPass = "FDASDFAS", Email = "lisi@163.com", RegTime = DateTime.Now }, new UserInfo() { Id = 3, UserName = "王五", UserPass = "FDASDFAS", Email = "wangwu@163.com", RegTime = DateTime.Now }, new UserInfo() { Id = 4, UserName = "赵六", UserPass = "FDASDFAS", Email = "zhaoliu@163.com", RegTime = DateTime.Now }, new UserInfo() { Id = 5, UserName = "田七", UserPass = "FDASDFAS", Email = "tianqi@163.com", RegTime = DateTime.Now }, new UserInfo() { Id = 6, UserName = "王八", UserPass = "FDASDFAS", Email = "wangba@163.com", RegTime = DateTime.Now } }; return Ok(list); } } }
接着我们需要修改一下App_Start目录下的WebApiConfig.cs文件中webapi的路由规则,以便通过api/{controller}/{action}的方式进行访问,同时让修改序列化方式,让WebAPI默认输出json格式的数据,具体操作如下:
using System; using System.Collections.Generic; using System.Linq; using System.Net.Http.Formatting; using System.Web.Http; namespace CrossDomainAccess.WebAPI { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API 配置和服务 // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); //清除所有序列化格式 config.Formatters.Clear(); //添加Json格式的序列化器 config.Formatters.Add(new JsonMediaTypeFormatter()); } } }
重新生成一下项目,并在浏览器中访问,这时我们可以的到json格式的数据,如下:
好了,到这里我们Web Api端的数据输出就准备好了。为了测试是否可以跨域访问,我们再转到CorsDemo.UI网站项目中。首先创建一个index.aspx页面(这个命名自己可以任意取)后打开,修改成如下的代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CrossDomainAccess.Web.Index" %> <!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="Scripts/jquery-2.2.3.min.js"></script> <script type="text/javascript"> $(function () { $('#getData').click(function () { $.ajax({ url: 'http://localhost:29867/api/UserInfo/getlist', dataType: 'json', success: function (data) { //以表格的形式在浏览器控制台显示数据,IE下不支持 console.table(data); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" value="跨域获取数据" id="getData" /> </div> </form> </body> </html>
完成以上步骤以后,启动WebAPI项目和Web项目,并在Web项目的Index页面中点击跨域获取数据按钮,打开浏览器控制台查看请求结果,在控制台会出现如下结果:
控制台提示我们跨域请求被阻止,同时提示CORS头部信息确实,所以我们可以通过去WebAPI配置CORS来让其支持跨域访问。
那现在我们在WebAPI项目中通过Nuget添加Microsoft.AspNet.WebApi.Cors ,然后在WebApiConfig.cs文件中配置HttpConfiguration的EnableCors方法即可。具体操作如下:
using System; using System.Collections.Generic; using System.Linq; using System.Net.Http.Formatting; using System.Web.Http; using System.Web.Http.Cors; namespace CrossDomainAccess.WebAPI { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API 配置和服务 EnableCrossSiteRequests(config); // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); //清除所有序列化格式 config.Formatters.Clear(); //添加Json格式的序列化器 config.Formatters.Add(new JsonMediaTypeFormatter()); } /// <summary> /// 允许跨域调用 /// </summary> /// <param name="config"></param> private static void EnableCrossSiteRequests(HttpConfiguration config) { //对所有的请求来源没有任何限制 var cors = new EnableCorsAttribute( origins: "*", headers: "*", methods: "*" ); config.EnableCors(cors); } } }
现在,我们再重新生成WebAPI项目并运行,接着在页面http://localhost:31521/Index.aspx中点击按钮“跨域获取数据”,通过firebug的控制台,我们可以看到数据跨域加载成功了,如下:
更多精彩内容,请点击《ajax跨域技术汇总》,进行深入学习和研究。
至此,关于ASP.Net Web Api支持跨域请求的示例和演示就完成了,谢谢大家的阅读。
相关文章
- 这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 在开发过程中,使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误,同样Visual Studio也支持对SQL Server里面的存储过程进行调试,下面就让我们看看具体的调试方法。...2021-09-22
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 什么是js跨域呐?js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。要...2015-10-30
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- 这篇文章主要介绍了记一次EFCore类型转换错误及解决方案,帮助大家更好的理解和学习使用asp.net core,感兴趣的朋友可以了解下...2021-09-22
- 什么是js跨域呐?js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。要...2015-10-30
详解SpringBoot之访问静态资源(webapp...)
这篇文章主要介绍了详解SpringBoot之访问静态资源(webapp...),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-14JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
这篇文章主要介绍了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法,涉及JavaScript页面元素定时滚动操作及ajax调用实现技巧,需要的朋友可以参考下...2016-04-19- 这篇文章主要介绍了mysql5.7 设置远程访问的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-08
- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12
- 这篇文章主要介绍了vue设置全局访问接口API地址操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-14
- 这篇文章主要为大家详细介绍了jquery Ajax实现Select动态添加数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-06-15
详解ASP.NET Core 中基于工厂的中间件激活的实现方法
这篇文章主要介绍了ASP.NET Core 中基于工厂的中间件激活的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22- 这篇文章主要为大家详细介绍了C#访问共享文件夹或者磁盘,需要用户名密码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了js实现ajax的用户简单登入功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-19
- 这篇文章主要介绍了jQuery Jsonp跨域模拟搜索引擎的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2017-06-24
- 这篇文章主要为大家详细介绍了C#访问网络共享文件夹的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了原生JS封装Ajax插件,为大家介绍不同域之间互相请求资源的跨域...2016-05-05
asp.net通过消息队列处理高并发请求(以抢小米手机为例)
这篇文章主要介绍了asp.net通过消息队列处理高并发请求(以抢小米手机为例),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22