如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问。
由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题。
刚开始没做任何处理,用jsonp的方式调用 web api 接口,总是报一个错误,如下:
如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的:
{"YourSignature":"嫁人要嫁程序员,钱多话少死得早"}
然而,JSONP请求期望得到这样的JSON:
jQuery123456([{"YourSignature":"嫁人要嫁程序员,钱多话少死得早"}])
所以我们需要对WebAPI做拓展,让它支持这样的callback
解决方案如下:
只需要给全局注册一个JsonCallbackAttribute,就可以判断接口的访问是属于跨域,还是非跨域,正常的返回。
因为我们的接口,可能是用来给 移动端(Android 、IOS)做数据接口,也有可能是给网站用,所以,考虑到可能存在跨域的问题。
GlobalConfiguration.Configuration.Filters.Add(new JsonCallbackAttribute());
public class JsonCallbackAttribute : ActionFilterAttribute
{
private const string CallbackQueryParameter = "callback"; public override void OnActionExecuted(HttpActionExecutedContext context)
{
var callback = string.Empty; if (IsJsonp(out callback))
{
var jsonBuilder = new StringBuilder(callback); jsonBuilder.AppendFormat("({0})", context.Response.Content.ReadAsStringAsync().Result); context.Response.Content = new StringContent(jsonBuilder.ToString());
//context.Response.Content = new StringContent("C(\"a\")");
} base.OnActionExecuted(context);
} private bool IsJsonp(out string callback)
{
callback = System.Web.HttpContext.Current.Request.QueryString[CallbackQueryParameter]; return !string.IsNullOrEmpty(callback);
}
结合下面图片不难开出,请求的地址带回了,callback的参数标识。
测试代码如下:
<html>
<head>
<title>团队信息列表</title>
<script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.7..js")"></script>
</head>
<body>
<ul id="contacts"></ul>
<script type="text/javascript">
$(function () {
$.ajax({
Type: "GET",
url: "http://app.uni2uni.com/api/CloudService/GetAllGroup",
dataType: "jsonp",
success: listContacts
});
}); function listContacts(contacts) {
alert(contacts);
$.each(contacts.data, function (index, contact) {
var html = "<li><ul>";
html += "<li>GroupName: " + contact.GroupName + "</li>";
html += "<li>GroupPicture:" + contact.GroupPicture + "</li>";
html += "</ul>";
$("#contacts").append($(html));
});
}
</script>
</body>
</html>
返回接口如下:
相关文章推荐:http://diaosbook.com/Post/2013/12/27/tips-for-aspnet-webapi-cors
如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问。的更多相关文章
- Asp.Net Web Api 接口,拥抱支持跨域访问。
如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问. 由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题 ...
- Web Api 2(Cors)Ajax跨域访问
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...
- 在ASP.NET Web API中实现CORS(跨域资源共享)
默认情况下,是不允许网页从不同的域访问服务器资源的,访问遵循"同源"策略的原则. 会遇到如下的报错: XMLHttpRequest cannot load http://local ...
- Asp.Net Web Api 接口
如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问. 由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的 ...
- 基于JWT的web api身份验证及跨域调用实践
随着多终端的出现,越来越多的站点通过web api restful的形式对外提供服务,很多网站也采用了前后端分离模式进行开发,因而在身份验证的方式上可能与传统的基于cookie的Session Id的 ...
- ASP.NET Web API 接口执行时间监控
软件产品常常会出现这样的情况:产品性能因某些无法预料的瓶颈而受到干扰,导致程序的处理效率降低,性能得不到充分的发挥.如何快速有效地找到软件产品的性能瓶颈,则是我们感兴趣的内容之一. 在本文中,我将解释 ...
- Web Api 利用 cors 实现跨域
一.安装 cors 二.修改 Web.config <appSettings> <add key="cors:allowedMethods" value=&quo ...
- ASP.NET Web API 2.1支持Binary JSON(Bson)
ASP.NET Web API 2.1内建支持XML.Json.Bson.form-urlencoded的MiME type,今天重点介绍下Bson.BSON是由10gen开发的一个数据格式,目前主要 ...
- web api 解决Ajax请求跨域问题
前端ajax请求接口时,经常出现跨域问题,当然了解决方法有很多种,比如: http://www.jb51.net/article/68424.htm 我本人恰好前后端都会一点,所以直接在接口端处理. ...
随机推荐
- 1891: 丘比特的烦恼 - BZOJ
Description 随着社会的不断发展,人与人之间的感情越来越功利化.最近,爱神丘比特发现,爱情也已不再是完全纯洁的了.这使得丘比特很是苦恼,他越来越难找到合适的男女,并向他们射去丘比特之箭.于是 ...
- Linux "ls -l"文件列表权限详解
ls Linux "ls -l"文件列表权限详解 1.使用 ls -l 命令 执行结果如下(/var/log) : drwxr-x--- root adm -- : apache2 ...
- 【BZOJ】【1085】【SCOI2005】骑士精神
IDA*算法 Orz HZWER A*+迭代加深搜索=IDA* 这题的估价相当于一个可行性剪枝,即如果当前走的步数s+未归位的点数>搜索深度k,则剪枝 /******************** ...
- 物理地址 = 段地址*10H + 偏移地址
程序如何执行: CPU先找到程序在内存中的入口地址 -- 地址总线 (8086有20根地址总线,每一根可以某一时传0或1, 20位的二进制数字可以表示的不同的数字的个数是2^20=1048576 10 ...
- 关于asp.net mvc4 在IE8下 导出excel失败的解决办法
在使用FileResult向浏览器输出文件时(pdf,excel等),通常这样做: byte[] fileContents = Encoding.UTF8.GetBytes(sbHtml.ToStri ...
- 安装numpy/scipy/scikit-learn的方法
安装numpy 和 scipy sudo yum install lapack lapack-devel blas blas-devel sudo yum install numpy.x86_64 ...
- StringBuffer用法
public class StringBufferTest { public static void main(String[] args) { StringBuffer sb=new StringB ...
- HDU1251 统计难题 Trie树
题目很水,但毕竟是自己第一道的Trie,所以还是发一下吧.Trie的更多的应用慢慢学,AC自动机什么的也慢慢学.... #include<iostream> #include<cst ...
- hdu2011
http://acm.hdu.edu.cn/showproblem.php?pid=2011 #include<iostream> #include<math.h> #incl ...
- 荣耀3X畅玩版狙击红米note!
华为与小米的战争史,可以追溯到 红米 799,华为独立初荣耀品牌推出荣耀3C,定价798,就是比你少一快; 小米3 定价1999,华为出荣耀3X,定价1980; 最近的红米Note,标配版定价799, ...