由于 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 接口，拥抱支持跨域访问。的更多相关文章

  1. Asp.Net Web Api 接口，拥抱支持跨域访问。

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

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

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

  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. 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开发的一个数据格式,目前主要 ...

  9. web api 解决Ajax请求跨域问题

    前端ajax请求接口时,经常出现跨域问题,当然了解决方法有很多种,比如: http://www.jb51.net/article/68424.htm 我本人恰好前后端都会一点,所以直接在接口端处理. ...

随机推荐

  1. cookieContainer应用

    PublicSharedFunctionGetCookiesSetByPage(ByVal strUrl AsString,ByVal cookieToProvide AsString)AsIEnum ...

  2. EXT经验--在调试中通过查看handler的第一个参数的xtype得知该参数信息及该handler的归属

    EXT模拟了OPP的思想,因此很多问题可以像JAVA语音那样去思考它.在实际阅读EXT时,常常需要我们搞清楚某个函数.某个对象的归属.如某个参数变量.方法属于哪个类,如下: 这是我今天在群中发出的问题 ...

  3. oracle——session

    一.解释session web应用中,session是服务器段保存用户信息的一个对象,cookie是浏览器端保存用户信息的对象.今天了解了oracle也有session对象,那么什么是oracle的s ...

  4. uva 10120

    bfs搜索  当n大于等于49 是 总是可能的 ~ http://www.algorithmist.com/index.php/UVa_10120 #include <cstdio> #i ...

  5. httpclient 人人网

    登录的站点是3g.renren.com 因为是手机人人, 页面比较简单 首先用HttpGet取出"http://3g.renren.com"的html代码, 是用Jsoup解析出登 ...

  6. java web项目 。classpath 文件解析

    eclipse工程中.classpath文件含义: 下面是一个.classpath文件内容: < ?xml version="1.0" encoding="UTF- ...

  7. 仪表盘 hostmap 新玩法让运维工作越玩越 high

    Cloud Insight 第13次新品发布会现在开始,首先非常感谢大家前来看我们的新功能发布会,下面我先给大家介绍一下新功能,之后有什么问题大家尽管问

  8. POJ 1733 Parity game(离散化+带权并查集)

    离散化+带权并查集 题意:长度为n的0和1组成的字符串,然后问第L和R位置之间有奇数个1还是偶数个1. 根据这些回答, 判断第几个是错误(和之前有矛盾)的. 思路:此题同HDU 3038 差不多,询问 ...

  9. CF 86D Powerful array

    离线+分块 将n个数分成sqrt(n)块. 对所有询问进行排序,排序标准:       1. Q[i].left /block_size < Q[j].left / block_size (块号 ...

  10. 表连接到底咋回事，就是产生中间结果啊！用于给select/insert等操作用

    1.表连接到底咋回事,就是产生中间结果啊!用于给select/insert等操作用啊. 2.表连接产生的结果用于select/insert用 3.表连接产生的结果用于select/insert用 比如 ...