如何让你的 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.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://diaosbook.com/Post/2013/12/27/tips-for-aspnet-webapi-cors

在寂寞的日子里沉淀自己，在程序的日子里找到自己，我为梦想而坚持！
 
 
 

Asp.Net Web Api 接口，拥抱支持跨域访问。的更多相关文章

  1. Web Api 2(Cors)Ajax跨域访问

    支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示   随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...

  2. 如何让你的 Asp.Net Web Api 接口，拥抱支持跨域访问。

    由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题. 刚开始没做任何处理,用jsonp的方式调用 web api 接口, ...

  3. 在ASP.NET Web API中实现CORS(跨域资源共享)

    默认情况下,是不允许网页从不同的域访问服务器资源的,访问遵循"同源"策略的原则. 会遇到如下的报错: XMLHttpRequest cannot load http://local ...

  4. Asp.Net Web Api 接口

    如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问.   由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的 ...

  5. 基于JWT的web api身份验证及跨域调用实践

    随着多终端的出现,越来越多的站点通过web api restful的形式对外提供服务,很多网站也采用了前后端分离模式进行开发,因而在身份验证的方式上可能与传统的基于cookie的Session Id的 ...

  6. ASP.NET Web API 接口执行时间监控

    软件产品常常会出现这样的情况:产品性能因某些无法预料的瓶颈而受到干扰,导致程序的处理效率降低,性能得不到充分的发挥.如何快速有效地找到软件产品的性能瓶颈,则是我们感兴趣的内容之一. 在本文中,我将解释 ...

  7. Web Api 利用 cors 实现跨域

    一.安装 cors 二.修改 Web.config <appSettings> <add key="cors:allowedMethods" value=&quo ...

  8. webapi支持跨域访问

    写在前面 在实际应用中,跨域请求还是比较常见的,如何上接口直接支持跨域的访问呢? demo 场景项目A有个接口用来获取用户列表,现在项目b也有个功能需要加载用户列表.这两个项目在两个域名下,至少端口好 ...

  9. .Net WebApi 支持跨域访问使用 Microsoft.AspNet.WebApi.Cors

    首先导入Cors库,通过程序包管理控制台导入 Install-Package Microsoft.AspNet.WebApi.Cors 引用库之后,我们需要进行简单的配置. 现在WebApiConfi ...

随机推荐

  1. hdu 4915 Parenthese sequence 多校第五场

    推断一个序列是否是有效是简单的. 可是推断序列是不是有多个解会出问题. 那么从i=0 ~l 假设读到问号,推断该问号成为(能否有效,该问号为)是否有效. 假设都有效,则必有多个解. 假设都无效,则无解 ...

  2. 初识Java——（Java学习笔记一）

    冯诺依曼体系结构   JAVA核心优势:跨平台---通过JVM(java虚拟机)来实现   JVM:Java虚拟机的一种规范     标示符:只能以下划线.美元符号($).字母.数字组成,不能以数字开 ...

  3. DirectSound应用

    只是使用的假设PlaySound()这个API函数来显示的声音效果,然后,然后,它不会出现在混合声音,因为PlaySound还有播放期间声音,这将不可避免地导致现有声音停止. 因此,使用 PlaySo ...

  4. 两个div横向排列，顶端对齐的方式。

    1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...

  5. 经典算法题每日演练——第十七题 Dijkstra算法

    原文:经典算法题每日演练--第十七题 Dijkstra算法 或许在生活中,经常会碰到针对某一个问题,在众多的限制条件下,如何去寻找一个最优解?可能大家想到了很多诸如“线性规划”,“动态规划” 这些经典 ...

  6. AngularJS 疑难问题解决汇总

    AngularJS 防止页面闪烁的方法 angularjs filter 详解 学习资料1 学习资料2 在 AngularJS 应用中处理单选框和复选框 学习资料3 AngularJS 之 Facto ...

  7. MVC 插件化框架支持原生MVC的Area和路由特性

    .NET MVC 插件化框架支持原生MVC的Area和路由特性 前面开放的源码只是简单的Plugin的实现,支持了插件的热插拔,最近晚上偶然想到,原生的MVC提供Areas和RouteAtrribut ...

  8. GitBook配置

    GitBook 是一个通过 Git 和 Markdown 来撰写书籍的工具.生成格式有:JSON.ePub.PDF.Website ! ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ...

  9. 让Docker功能更强大的10个开源工具

    让Docker功能更强大的10个开源工具 更好的管理.Web前端程序.更深入地了解容器应用程序,Docker生态系统正在迅速发展,这还得归功于其充满活力的开源社区. 软件项目的成功常常根据其催生的生态 ...

  10. 我在Github上的flare-spark项目

    Flare-Spark 介绍 我在自己的github上建了个flare-spark项目,本身是Apache Spark项目Master分支的镜像.在Spark的基础上,添加了flare子项目. 估计大 ...