asp.net web api2.0 ajax跨域解决方案
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),
就这样，只是把网络上有解决方案的整理了一下，放在了一切。
asp.net web api2.0 ajax跨域解决方案的更多相关文章
- 使用Web代理实现Ajax跨域
目前的工作项目分为前端和后台,双方事先约定接口,之后独立开发.后台每天开发完后在测试服务器上部署,前端连接测试服务器进行数据交互.前端和后台分开的好处是代码不用混在一个工程里一起build,互不干涉. ...
- AJAX跨域解决方案
从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在,这似乎是一个很经典的问题了,是由于javascript的同源策略所导致. 解决的办法,大概有如下几种: 1. 使用中 ...
- Ajax跨域解决方案大全
题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨 ...
- 【PHP】Ajax跨域解决方案 、jsonp、cors
参考文章: 1.https://blog.csdn.net/u014727260/article/details/72793459 (后台java,实际上差不多) 2. 如何解决ajax跨域传输 数据 ...
- 前端Ajax跨域解决方案
业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应 ...
- [妙味Ajax]第三课：AJAX跨域解决方案：JSONP
知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...
- ajax跨域解决方案(服务端仅限java)
楼主前端知识菜鸟,高手勿喷,在此记录工作中遇到的问题及解决方案,大神请滤过 方法1.jsonp(js客户端ajax请求参数方式设置) 方法2.服务端接口设置: HttpServletResponse ...
- ajax跨域解决方案2
配置文件添加: <system.webServer> <httpProtocol> <customHeaders> &l ...
- 基于java过滤器实现的ajax跨域解决方案
http://software.dzhuvinov.com/cors-filter-configuration.html
随机推荐
- Spring aop 小例子demo
由于最近的服务项目提供接口有一个需求,所有操作都必须检查操作的服务可用,所以感觉Aop特别适合实施.完成学习的小例子. 关于spring-Aop原理:http://m.oschina.net/blog ...
- 键盘enter事件时间页面绑定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 汉高澳大利亚sinox2014电影播放flash最好的办法是安装游戏windows文本firefox
事实上,韩澳sinox本身是没有原生flashplayer,无论怎么捣鼓,它们是从adobe弄linux要么windows版本号flashplayer,它不停地拨弄linux版本号flashplaye ...
- 在ASP.NET 5应用程序中的跨域请求功能详解
在ASP.NET 5应用程序中的跨域请求功能详解 浏览器安全阻止了一个网页中向另外一个域提交请求,这个限制叫做同域策咯(same-origin policy),这组织了一个恶意网站从另外一个网站读取敏 ...
- MVC 如何在一个同步方法（非async）方法中等待async方法
MVC 如何在一个同步方法(非async)方法中等待async方法 问题 首先,在ASP.NET MVC 环境下对async返回的Task执行Wait()会导致线程死锁.例: public Actio ...
- jQuery.reveal弹出层使用
最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...
- Weka初步
从前年開始使用weka最数据挖掘方面的研究,到如今有一年半的时间了.看到我们同组的兄弟写了关于weka方面的总结.我也想整理一下.由于网上的资料实在是太少.记得刚接手的时候,真是硬着头皮看代码.只是到 ...
- java 突击队注意事项：在路上
情绪: 灵活:让标准成为价格值.为了给你一个想法和标准,你可以有一个不同的使用.不是死扣定理.决这个问题. 看书:分两类,一类依据知识点进行罗列.并且结构清晰,能够看完一章有选择进行总结(不是笔记,总 ...
- Layout Renderers
Layout Renderers NLog package ${activityid} - Puts into log a System.Diagnostics trace correlation i ...
- hdu5044 Tree 树链拆分，点细分，刚，非递归版本
hdu5044 Tree 树链拆分.点细分.刚,非递归版本 //#pragma warning (disable: 4786) //#pragma comment (linker, "/ST ...