asp.net web api2.0 ajax跨域解决方案

Web Api的优缺点就不说了，直接说怎么跨域，我搜了一下，主要是有两种。

 一，ASP.NET Web API支持JSONP，分两种

　　1，利用JsonMediaTypeFormatter，具体参考这里：http://www.cnblogs.com/artech/p/cors-4-asp-net-web-api-03.html

上代码：

新建JsonpMediaTypeFormatter类：

    public class JsonpMediaTypeFormatter : JsonMediaTypeFormatter

    {

        private string callbackQueryParameter;

        public JsonpMediaTypeFormatter()

        {

            SupportedMediaTypes.Add(DefaultMediaType);

            SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/javascript"));

            MediaTypeMappings.Add(new UriPathExtensionMapping("jsonp", DefaultMediaType));

        }

        public string CallbackQueryParameter

        {

            get { return callbackQueryParameter ?? "callback"; }

            set { callbackQueryParameter = value; }

        }

        /// <summary>

        /// 将对象序列化后的JSON字符串填充到JavaScript回调函数中

        /// </summary>

        /// <param name="type"></param>

        /// <param name="value"></param>

        /// <param name="stream"></param>

        /// <param name="content"></param>

        /// <param name="transportContext"></param>

        /// <returns></returns>

        public override Task WriteToStreamAsync(Type type, object value, Stream stream, HttpContent content, TransportContext transportContext)

        {

            string callback;

            if (IsJsonpRequest(out callback))

            {

                return Task.Factory.StartNew(() =>

                {

                    var writer = new StreamWriter(stream);

                    writer.Write(callback + "(");

                    writer.Flush();

                    base.WriteToStreamAsync(type, value, stream, content, transportContext).Wait();

                    writer.Write(")");

                    writer.Flush();

                });

            }

            else

            {

                return base.WriteToStreamAsync(type, value, stream, content, transportContext);

            }

        }

        /// <summary>

        /// 判断是否为跨域请求

        /// </summary>

        /// <param name="callback"></param>

        /// <returns></returns>

        private bool IsJsonpRequest(out string callback)

        {

            callback = null;

            if (HttpContext.Current.Request.HttpMethod != "GET")

                return false;

            callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];

            return !string.IsNullOrEmpty(callback);

        }

    }
  • 在Global.asax中注册JsonpMediaTypeFormatter
  • GlobalConfiguration.Configuration.Formatters.Insert(0, new JsonpMediaTypeFormatter());

　　2，利用ActionFilterAttribute ，具体参考这里：http://stackoverflow.com/questions/9421312/jsonp-with-asp-net-web-api/18206518#18206518

　　代码：

新建 JsonCallbackAttribute 类

    public class JsonCallbackAttribute : ActionFilterAttribute

    {

        private const string CallbackQueryParameter = "callback";

        public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)

        {

            var callback = string.Empty;

            if (IsJosnp(out callback))

            {

                var jsonBuilder = new StringBuilder(callback);

                jsonBuilder.AppendFormat("({0})", actionExecutedContext.Response.Content.ReadAsStringAsync().Result);

                actionExecutedContext.Response.Content = new StringContent("C(\"a\")");

            }

            base.OnActionExecuted(actionExecutedContext);

        }

        private bool IsJosnp(out string callback)

        {

            callback = System.Web.HttpContext.Current.Request.QueryString[CallbackQueryParameter];

            return !string.IsNullOrEmpty(callback);

        }

    }

在Global.asax中注册JsonCallbackAttribute

GlobalConfiguration.Configuration.Filters.Add(new JsonCallbackAttribute());

 二，使用 Microsoft ASP.NET Web API 2 Cross-Origin Suppor

　　使用 NuGe 安装 Microsoft ASP.NET Web API 2 Cross-Origin Support，这里说的很详细

　　然后在Global.asax中开启针对CORS的支持，EnableCors加不加无影响的样子。

测试实例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>

    <title>测试 WebApi 跨域</title>

</head>

<body>

    <form id="form1" runat="server">

        <input type="button" id="btnGet" value="Get 点击跨域查询数据" />

        <div id="bindData">

        </div>

        <input type="button" id="btnPost" value="Post 点击跨域查询数据" />

    </form>

    <script>

        $('#btnGet').bind('click', function (e) {

            $.ajax({

                type: "GET",

                url: "http://localhost:20128/api/UserInfo",

                success: function (data) {

                    var html = "";

                    $.each(data, function (index, val) {

                        html += "<ul><li>GroupName: " + val.Id + " -- " + val.Name + "</li></ul>";

                    });

                    $("#bindData").append(html);

                }

            });

        });

        $('#btnPost').bind('click', function (e) {

            var user = { Id: '1', Name: '233' };

            $.ajax({

                type: "POST",

                contentType: 'application/json; charset=utf-8',

                data: JSON.stringify(user),

                url: "http://localhost:20128/api/UserInfo",

                success: function (data) {

                    //var html = "";

                    //$.each(data, function (index, val) {

                    //    html += "<ul><li>GroupName: " + val.Id + " -- " + val.Name + "</li></ul>";

                    //});

                    //$("#bindData").append(html);

                }

            });

        });

    </script>

</body>

</html>

Ajax请求在Post数据的时候，一定要加上这样项：

contentType: 'application/json; charset=utf-8',

data: JSON.stringify(user),

就这样，只是把网络上有解决方案的整理了一下，放在了一切。

 
分类: WebApi
标签: WebApi

asp.net web api2.0 ajax跨域解决方案的更多相关文章

  1. 使用Web代理实现Ajax跨域

    目前的工作项目分为前端和后台,双方事先约定接口,之后独立开发.后台每天开发完后在测试服务器上部署,前端连接测试服务器进行数据交互.前端和后台分开的好处是代码不用混在一个工程里一起build,互不干涉. ...

  2. AJAX跨域解决方案

    从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在,这似乎是一个很经典的问题了,是由于javascript的同源策略所导致. 解决的办法,大概有如下几种: 1. 使用中 ...

  3. Ajax跨域解决方案大全

    题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨 ...

  4. 【PHP】Ajax跨域解决方案 、jsonp、cors

    参考文章: 1.https://blog.csdn.net/u014727260/article/details/72793459 (后台java,实际上差不多) 2. 如何解决ajax跨域传输 数据 ...

  5. 前端Ajax跨域解决方案

    业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应 ...

  6. [妙味Ajax]第三课：AJAX跨域解决方案：JSONP

    知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...

  7. ajax跨域解决方案(服务端仅限java)

    楼主前端知识菜鸟,高手勿喷,在此记录工作中遇到的问题及解决方案,大神请滤过 方法1.jsonp(js客户端ajax请求参数方式设置) 方法2.服务端接口设置: HttpServletResponse ...

  8. ajax跨域解决方案2

    配置文件添加: <system.webServer>       <httpProtocol>        <customHeaders>          &l ...

  9. 基于java过滤器实现的ajax跨域解决方案

    http://software.dzhuvinov.com/cors-filter-configuration.html

随机推荐

  1. 试DG周围环境

    试DG周围环境 周围环境 名称 主库 备库 主机名 bjsrv shsrv 软件版本号 RedHat Enterprise5.5.Oracle 11g 11.2.0.1 RedHat Enterpri ...

  2. 第四章——SQLServer2008-2012资源及性能监控（3）

    原文:第四章--SQLServer2008-2012资源及性能监控(3) 本文为本系列最后一章,监控内存使用.监控服务器的内存是非常重要的事情,有很多情况会引起内存消耗.所以要经常性地做检查. 本文将 ...

  3. 2014.06.14 GlusterFS技术交流视频

    6月14线下GlusterFS视频交流.高清视频是非常好的,我初听言论方面,谈到迅速,似乎不是很清楚,讲座结束后速度需要改进.谢谢能力的天空AbleSky高大内设,谢谢学生参加. 在线公开课:http ...

  4. poj3281-Dining ，最大流量，内置图

    id=3281">点击打开链接 分析: 求最大流 建图: 拆点 牛拆成左边与食物相连的左牛 和 右边与饮料相连的右牛 1.s->食物 连边 2.食物->左牛 3.左牛-&g ...

  5. 【Hibernate学习】 ——ORM（三）

    前面几种关系我们曾经就常常常使用,对于继承我们也并不陌生,常常接触的类与类之间的继承用extendskeyword,那么在表与表的关系中怎样表示呢?以下我们来讲继承映射. 继承有三种实现的策略,单表继 ...

  6. Ehcache详细解读（转）

    Ehcache 是现在最流行的纯Java开源缓存框架,配置简单.结构清晰.功能强大,最初知道它,是从Hibernate的缓存开始的.网上中文的EhCache材料 以简单介绍和配置方法居多,如果你有这方 ...

  7. Struts2 + uploadify 多文件上传完整的例子！

    首先,我这里使用的是  Jquery  Uploadify3.2版本号  导入相关的CSS  JS    <link rel="stylesheet" type=" ...

  8. JS它DOM

    DOM:document object model.文档对象模型.它主要由许多节点.而基于JS对象的一切视角,DOM核心是节点对象和操作方法的属性.从下面三方面来介绍DOM. 一.节点查找与操作 这部 ...

  9. 跟着辛星认识一下PHP的自己主动载入

    作为一个框架,文件的载入机制是不能少的,那么我们应该怎么载入呢,这些PHP已经给我们想好了,所以我们仅仅须要依照规则办事就能够了,PHP中有两个函数能够完毕这个功能,第一个是__autoload,如今 ...

  10. C++ Primer 学习笔记_41_STL实践与分析（15）--先来看看算法【下一个】

    STL实践与分析 --初窥算法[下] 一.写容器元素的算法 一些算法写入元素值.在使用这些算法写元素时一定要当心.必须.写入输入序列的元素 写入到输入序列的算法本质上是安全的--仅仅会写入与指定输入范 ...