【笔记】Asp.Net WebApi对js POST带参数跨域请求的支持方案
2015-03-25 11:20
399 查看
先说下需求:在原来的WebApi项目中增加对js跨域的请求支持,请求方式:以POST为主,webapi路由规则根据原项目需求修改如下:
熟悉WebApi的猿猿们都知道这样设置路由规则直接导致了同一个controller中的不同方法的访问改由方法前的标签决定,而不是方法名来决定。
关于js跨域的原理如下:假设我们请求的地址A:http://api.xx.com/api/GetAllPeople,那如果在B页面 http://www.baidu.com/tlzzu.html中使用POST去调用外部接口的话,B页面会先向A地址发送一个OPTIONS类型(OPTIONS并不是webapi中的一个方法名,而是一种请求类型,类似POST、GET等)的预检请求(Preflight Request)只要对这种请求返回200就可以,具体内容不作检验。执行成功后会再次对A接口进行正常请求。返回数据。
解决办法:
如果是Asp.Net MVC或者是WebApi可进行如下设置:
1.先在Web.config中进行如下设置:
注意【Access-Control-Allow-Headers】属性,里面表示iis允许接受的headers的集合,如果没有key则不能在JQuery.ajax中使用beforeSend(或者headers:{"key":"11111"},)方法传递参数.如果在HTTP请求中会在请求头里加入其它属性,则一定要在
<add name="Access-Control-Allow-Headers" value="Origin,X-Requested-With,Content-Type,accept,key" />
中声明。
2.在Global.asax文件中设置:
用于过滤所有的OPTIONS请求
3.在B页面中进行如下请求:
遇到问题是需要冷静,创建demo测试的时候demo需要干净,最好全过程重新创建。
另:
1.据说在apicontroller上添加[EnableCors]属性也可以进行跨域访问,不过我没找到,可参考下面文章:ASP.NET Web API自身对CORS的支持: EnableCorsAttribute特性背后的故事;
2.jsonp方式的请求只支持GET方式的请求,所以不能满足现在的需要(带参数的POST跨域请求);
3.本文还参考关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案文章
public static void Register(HttpConfiguration config) { // Web API configuration and services // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); }
熟悉WebApi的猿猿们都知道这样设置路由规则直接导致了同一个controller中的不同方法的访问改由方法前的标签决定,而不是方法名来决定。
关于js跨域的原理如下:假设我们请求的地址A:http://api.xx.com/api/GetAllPeople,那如果在B页面 http://www.baidu.com/tlzzu.html中使用POST去调用外部接口的话,B页面会先向A地址发送一个OPTIONS类型(OPTIONS并不是webapi中的一个方法名,而是一种请求类型,类似POST、GET等)的预检请求(Preflight Request)只要对这种请求返回200就可以,具体内容不作检验。执行成功后会再次对A接口进行正常请求。返回数据。
解决办法:
如果是Asp.Net MVC或者是WebApi可进行如下设置:
1.先在Web.config中进行如下设置:
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Origin,X-Requested-With,Content-Type,accept,key" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders> </httpProtocol> </system.webServer>
注意【Access-Control-Allow-Headers】属性,里面表示iis允许接受的headers的集合,如果没有key则不能在JQuery.ajax中使用beforeSend(或者headers:{"key":"11111"},)方法传递参数.如果在HTTP请求中会在请求头里加入其它属性,则一定要在
<add name="Access-Control-Allow-Headers" value="Origin,X-Requested-With,Content-Type,accept,key" />
中声明。
2.在Global.asax文件中设置:
protected void Application_BeginRequest(object sender, EventArgs e) { var req = System.Web.HttpContext.Current.Request; if (req.HttpMethod == "OPTIONS")//过滤options请求,用于js跨域 { Response.StatusCode = 200; Response.SubStatusCode = 200; Response.End(); } }
用于过滤所有的OPTIONS请求
3.在B页面中进行如下请求:
$.ajax({ type: "POST", contentType: "application/x-www-form-urlencoded", url: "http://api.xx.com/api/GetAllPeople", dataType: "json", data:{DM:52,key:"11111"}, success: function (result) { alert(JSON.stringify(result)); } });
总结:
遇到问题是需要冷静,创建demo测试的时候demo需要干净,最好全过程重新创建。
另:
1.据说在apicontroller上添加[EnableCors]属性也可以进行跨域访问,不过我没找到,可参考下面文章:ASP.NET Web API自身对CORS的支持: EnableCorsAttribute特性背后的故事;
2.jsonp方式的请求只支持GET方式的请求,所以不能满足现在的需要(带参数的POST跨域请求);
3.本文还参考关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案文章
相关文章推荐
- asp.net webApi 支持js的跨域请求
- Asp.Net WebApi服务端解决跨域方案
- asp.net 发送 xml post请求和接收 xml post请求时出现(500) 内部服务器错误(WebClient学习笔记)
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
- WebAPI Post请求多参数处理方案
- 我使用Asp.net MVC WebAPI支持OData协议进行分页操作的笔记(第二篇)
- asp.net webapi支持跨域
- ASP.Net之JS之AJAX之Post请求
- ASP.NET MVC post请求接收参数的三种方式
- 我使用Asp.net MVC WebAPI支持OData协议进行分页操作的笔记(第三篇)
- 前端跨域方案-跨域请求代理(asp.net handler)
- Asp.Net WebAPI 通过HttpContextBase获取请求参数
- asp.net 使用ajax请求地址接口数据 ajax返回类型是json js get post请求数据
- 使Asp.net WebApi支持JSONP和Cors跨域访问
- 【转】asp.net(c#)使用HttpWebRequest附加携带请求参数以post方式模拟上传大文件(以图片为例)到Web服务器端
- 黑马程序员之ASP.NET学习笔记: Http方法:Get请求与Post请求的区别
- 详解js跨域请求的两种方式,支持post请求
- ASP.NET WebApi MediaTypeFormatter参数绑定的研究,支持POST文本方式的JSON字符串绑定
- Asp.NET应用thickbox.js传递参数,后台请求不到的问题
- asp.net 发送 xml post请求和接收 xml post请求时出现(500) 内部服务器错误(WebClient学习笔记)