由于 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. boost::bind

    bind并不是一个单独的类或函数,而是非常庞大的家族,依据绑定的参数个数和要绑定的调用对象类型,总共有十个不同的形式,但它们的名字都叫bind. bind接受的第一个参数必须是一个可调用对象f,包括函 ...

  2. 【HDOJ】【3555】Bomb

    数位DP cxlove基础数位DP第二题 与上题基本相同(其实除了变成long long以外其实更简单了……) //HDOJ 3555 #include<cmath> #include&l ...

  3. 剑指offer--面试题9

    题目一:求斐波那契数列第n项 自己所写代码如下: #include "stdafx.h" #include<iostream> long Fibonacci(unsig ...

  4. 【Asp.Net MVC--资料汇总】杂七杂八

    Html.RenderPartial与Html.RenderAction的区别 http://blog.sina.com.cn/s/blog_8278b1800100zkn0.html ASP.NET ...

  5. lunux 启动 tomcat

    本人从官网http://tomcat.apache.org/上面下载的6.0.1_31版本,并解压包后改名存放在:/usr/share/tomcat6 本人使用的是root用户登录,下面就说说具体的操 ...

  6. 精华阅读第 10 期 |解开阿尔法狗（AlphaGo）人工智能的画皮

    谷歌用一个变了身的古老「穷举算法」,披上「神经网络」的画皮,假装「跨时代」的黑科技,忽悠广大「膜拜者」,「狮仙」我实在看不下去了,来揭一揭这只幺蛾子小狗的画皮. 本期是移动开发精英俱乐部的第10期推荐 ...

  7. HDU 1598 find the most comfortable road(枚举+并查集，类似于最小生成树)

    一开始想到用BFS,写了之后,发现有点不太行.网上查了一下别人的解法. 首先将边从小到大排序,然后从最小边开始枚举,每次取比它大的边,直到start.end属于同一个集合,即可以连通时停止.过程类似于 ...

  8. [shell编程]初识sed和gawk

    一.sed编辑器       shell脚本最常见的用途就是处理文本文件,sed和gawk能够极大的简化需要进行的数据处理任务.sed编辑器是流编辑器,跟普通交互式文本编辑器(如vim)不同.流编辑器 ...

  9. 一些linux的问题

    本文罗列的是我在学习linux与shell编程时所遇到的一些问题.我相信既然存在问题那么就会有需求,记录于此,希望可以快速帮助到大家. 1.在vim中用“/word"查找后,vim会以棕色背 ...

  10. ubuntu12.10+NDK r9 编译 ffmpeg 的一些参考资料Perhaps you should add the directory containing `libssl.pc'

    首先入门级的 编译宝典: https://trac.ffmpeg.org/wiki/CompilationGuide/Android http://www.roman10.net/how-to-bui ...