我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还有另外实现跨域方式
一、手动实现JSONP跨域
1、首先创建一个Web项目,在这里我使用一般处理程序
1 public class Demo : IHttpHandler 2 { 3 public void ProcessRequest(HttpContext context) 4 { 5 //接收参数 6 string callBack = context.Request["callBack"]; 7 string uName = context.Request["uName"]; 8 string data = "({\"name\":\"" + uName + "\",\"age\":\"23\"})"; 9 string josnStr = callBack + data;10 context.Response.Write(josnStr);11 }12 13 public bool IsReusable14 {15 get16 {17 return false;18 }19 }20 }
2、创建一个新Web项目并新建html文件
1 <!DOCTYPE html> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>手动实现JSONP实现跨域请求Demo</title> 6 <!--引用jquery--> 7 <script src='/images/loading.gif' data-original="http://www.cnblogs.com//jquery-1.7.1.js"></script> 8 <script type="text/javascript"> 9 var urlPrefix = "http://localhost:2571";10 //js跨域请求中的回调函数11 function fun(data) {12 for (var i in data) {13 alert(data[i]);14 }15 }16 //js跨域请求17 function jsRequest() {18 var script = document.createElement("script");19 script.setAttribute("id", "script1");20 script.setAttribute("type", "text/javascript");21 script.setAttribute("src", urlPrefix + "/demo.ashx?uName=zzq&callBack=fun");22 //添加到body之后23 document.documentElement.appendChild(script);24 //使用完后移除25 $("#script1").remove();26 }27 28 //jq跨域请求29 function jqRequest() {30 $.ajax(31 {32 url: urlPrefix + "/demo.ashx",33 type: "get",34 data: { uName: "zzq" },35 dataType: "jsonp", //指定Jq发送jsonp请求36 jsonpCallback: "fun", //指定回调函数,没有此项可以直接在success中写回调37 jsonp: 'callBack' //默认callback38 //success: function (data) {39 // for (var i in data) {40 // alert(data[i]);41 // }42 //}43 });44 }45 </script>46 </head>47 <body>48 <!--Js跨域请求和Jquery跨域请求都不支持post方式,jquery跨域其实就是JS跨域的封装-->49 <input type="button" value="使用原生JS跨域请求" onclick="jsRequest()" />50 <input type="button" value="使用Jquery跨域请求" onclick="jqRequest()" />51 </body>52 </html>
3、测试,将两个网站都打开,http://localhost:2571:填写第一步创建网站的地址
两个请求都是返回同样的信息
二、添加请求头实现跨域
1、同样是先创建一个Web项目,跟上面一样使用的是一般处理程序,*.ashx,这里我只贴出重要的部分
1 public void ProcessRequest(HttpContext context) 2 { 3 //接收参数 4 string uName = context.Request["uName"]; 5 string data = "{\"name\":\"" + uName + "\",\"age\":\"23\"}"; 6 //只需在服务端添加以下两句 7 context.Response.AddHeader("Access-Control-Allow-Origin", "*"); 8 //跨域可以请求的方式 9 context.Response.AddHeader("Access-Control-Allow-Methods", "POST,GET");10 context.Response.Write(data);11 }
2、创建一个新Web项目并新建html文件
1 <!DOCTYPE html> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>添加请求头跨域访问Demo</title> 6 <script src='/images/loading.gif' data-original="http://www.cnblogs.com//jquery-1.7.1.js"></script> 7 <script type="text/javascript"> 8 function crosRequest() { 9 $.post("http://localhost:2571/XHR2Demo.ashx", { uName: "zzq" }, function (data) {10 for (var i in data) {11 alert(data[i]);12 }13 }, "json")14 }15 </script>16 </head>17 <body>18 <input type="button" value="添加请求头跨域访问" onclick="crosRequest()" />19 </body>20 </html>
3、最后就是测试,查看效果了
加了以下信息
三、CROS实现WebApi跨域
1、新建WebApi项目并通过NuGet下载程序包,搜索程序包【Microsoft.AspNet.WebApi.Cors】,一般我喜欢下载一个中文包,方便查看注释
2、在Global的Application_Start中加上如下代码
1 var cors = new EnableCorsAttribute("*", "*", "*");2 GlobalConfiguration.Configuration.EnableCors(cors);
注意这两句放Application_Start方法最前面,否则会导致不能跨域,暂不知其原因
3、创建一个新Web项目并新建html文件
1 <!DOCTYPE html> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>WebApi跨域Demo</title> 6 <script src='/images/loading.gif' data-original="http://www.cnblogs.com//jquery-1.10.2.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 getData();10 });11 function getData() {12 var furl = "http://localhost:19125/api/home";13 $.get(furl, function (data) {14 for (var i = 0; i < data.length; i++) {15 alert(data[i]);16 }17 });18 }19 </script>20 </head>21 <body>22 WebApi跨域Demo23 </body>24 </html>
4、最后测试看看效果
加了以下信息
总结
1、手动创建JSONP跨域
优点:无浏览器要求,可以在任何浏览器中使用此方式
缺点:只支持get请求方式,请求的后端出错不会有提示,造成不能处理异常
2、添加请求头实现跨域
优点:支持任意请求方式,并且后端出错会像非跨域那样有报错,可以对异常进行处理
缺点:兼容性不是很好,IE的话 <IE10 都不支持此方式
第三种的话我觉得原理就是第二种的实现,实际测试发现跟第二种一样,通过查看请求报文中的Head也能看出
原标题:Web Api之Cors跨域以及其他跨域方式(三)
关键词:web