如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问。
来源:互联网 发布:淘宝如何免费推广 编辑:程序博客网 时间:2024/05/17 03:55
由于 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.1.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://www.cnblogs.com/Kummy/p/3767269.html
阅读全文
0 0
- 如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问。
- [CORS:跨域资源共享] 通过扩展让ASP.NET Web API支持W3C的CORS规范
- 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的示例
- [CORS:跨域资源共享] 通过扩展让ASP.NET Web API支持JSONP
- 通过扩展让ASP.NET Web API支持JSONP
- ASP.net Web API允许跨域访问解决办法
- [CORS:跨域资源共享] ASP.NET Web API自身对CORS的支持:从实例开始
- ASP.NET Web API 跨域访问(CORS)要注意的地方
- asp api接口支持跨域
- 让你的ASP.NET虚拟主机也支持子网站
- 让你的ASP.NET虚拟主机也支持子网站
- 让你的ASP.NET虚拟主机也支持子网站
- 让你的ASP.NET虚拟主机也支持子网站
- 让你的ASP.NET虚拟主机也支持子网站
- 让你的ASP.NET虚拟主机也支持子网站
- ASP.NET Web API 2 对 CORS 的支持
- ASP.NET Web API对OData的支持
- ASP.NET Web API自身对CORS的支持
- cuda中各种类型的变量的总结(有转载的,有添加的)
- Eclipse中导入maven项目,并转为web加载进tomcat
- Kotlin 基本类型
- SpringMVC 简单使用
- Spring定时器配置
- 如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问。
- QProgressDialog 借鉴及界面优化
- oracle学习之约束与索引
- iOS 【关于推送如何选择】
- Oracle数据库基础知识
- tcp/ip参考模块
- 翻译
- Vm配置安装CentOS-7-Minimal
- Java冒泡排序