Api之Cors跨域以及其他跨域方式

作者: 银河网站登录  发布:2019-10-08
 1 <!DOCTYPE html>
 2 <html xmlns="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="/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跨域Demo
23 </body>
24 </html>

     注意这两句放Application_Start方法最前边,否则会促成不能够跨域,暂不知其缘由

图片 1

图片 2

 1 <!DOCTYPE html>
 2 <html xmlns="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="/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'       //默认callback
38                 //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>

1、同样是先创立三个Web项目,跟上边同样使用的是形似管理程序,*.ashx,这里作者只贴出重要的有的

图片 3

图片 4

我们精通ajax不可能跨域访问,不过有的时候大家确实需求跨域访谈获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还有其余实现跨域方式

三个诉求都以再次来到同样的音讯

三、CROS实现WebApi跨域

加了以下音讯

2、创设八个新Web项目并新建html文件

一、手动完毕JSONP跨域

3、成立四个新Web项目并新建html文件

图片 5

3、最终正是测量检验,查看效果了

图片 6

图片 7

2、创制一个新Web项目并新建html文件

 1 <!DOCTYPE html>
 2 <html xmlns="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="/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>

二、加多央浼头完结跨域

 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         }
 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 IsReusable
14         {
15             get
16             {
17                 return false;
18             }
19         }
20     }
1 var cors = new EnableCorsAttribute("*", "*", "*");
2 GlobalConfiguration.Configuration.EnableCors(cors);

加了以下音讯

图片 8

1、新建WebApi项目并透过NuGet下载程序包,寻觅程序包【Microsoft.AspNet.WebApi.Cors】,经常自身喜悦下载多个普通话包,方便查看注释

2、在Global的Application_Start中添加如下代码

总结

1、手动成立JSONP跨域

优点:无浏览器供给,能够在任何浏览器中央银行使此办法

破绽:只帮忙get需要方式,须要的后端出错不会有提醒,形成不能管理特别

2、增多伏乞头完结跨域

亮点:帮衬大肆须求格局,并且后端出错会像非跨域那样有报错,能够对相当举办管理

缺欠:宽容性不是很好,IE的话 <IE10 都不帮衬此办法

其二种的话笔者以为原理正是第两种的兑现,实际测量检验发掘跟第三种同等,通过查阅须求报文中的Head也能来看

1、首先成立一个Web项目,在那边笔者利用相似管理程序

4、最终测量检验看看效果

3、测量检验,将三个网址都开拓,

图片 9

本文由银河网站登录发布于银河网站登录,转载请注明出处:Api之Cors跨域以及其他跨域方式

关键词:

上一篇:没有了
下一篇:加载图像