Api之Cors跨域以及其他跨域方式
Web Api之Cors跨域以及其他跨域方式（三）
我们知道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 IsReusable
14 {
15 get
16 {
17 return false;
18 }
19 }
20 }
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>手动实现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>
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 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>
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 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>
4、最后测试看看效果
加了以下信息
总结
1、手动创建JSONP跨域
优点：无浏览器要求，可以在任何浏览器中使用此方式
缺点：只支持get请求方式，请求的后端出错不会有提示,造成不能处理异常
2、添加请求头实现跨域
优点：支持任意请求方式,并且后端出错会像非跨域那样有报错，可以对异常进行处理
缺点：兼容性不是很好，IE的话 <IE10 都不支持此方式
第三种的话我觉得原理就是第二种的实现，实际测试发现跟第二种一样，通过查看请求报文中的Head也能看出
Api之Cors跨域以及其他跨域方式的更多相关文章
- 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示
随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是 ...
- Web Api 2(Cors)Ajax跨域访问
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...
- Web Api之Cors跨域（干货）---大家一定要看清我写的内容哦
Web Api之Cors跨域 要想跨域需要准备一下几步骤 1.创建WebAPI(请按照图片先后顺序来) 2.进入NuGet包管理搜 Microsoft.AspNet.WebApi.Cors 进行下载 ...
- System.Web.Http.Cors配置跨域访问的两种方式
System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...
- CORS（跨域资源共享）跨域问题及解决
当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯 ...
- 使用Cors在WebApi中实现跨域请求，请求方式为angular的 $http.jsonp
使用Cors在WebApi中实现跨域请求 第一步,在webapi项目中安装cors 在Web API配置文件中(Global.asax)进行全局配置: public class WebApiAppli ...
- ASP.NET MVC & WebApi 中实现Cors来让Ajax可以跨域访问 （转载）
什么是Cors? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨源服务器,发出XMLHttpReq ...
- SpringBoot：CORS处理跨域请求的三种方式
一.跨域背景 1.1 何为跨域? Url的一般格式: 协议 + 域名(子域名 + 主域名) + 端口号 + 资源地址 示例: https://www.dustyblog.cn:8080/say/Hel ...
- 跨域学习笔记1--跨域调用webapi
在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...
随机推荐
- hdu 4614 Vases and Flowers （二分 线段树）
题目大意:爱丽丝有N个花瓶,每个花瓶最多放一朵花.然后又如下两个操作. 1:A B 从第A个花瓶开始,往后依次插B朵花,直到不能插为止.如果一朵花都不能插入就输出“can.....”,否则输出第 ...
- 梳理一下uboot是如何从nandflash挂载文件系统的
只是找到了比较一点点的线索, 如下: 首先要有的概念是,内核在挂载文件系统之前,自己会做一个虚拟fs. 1. Uboot:从flash启动set bootcmd nand read 0x3000000 ...
- C#超级有用的一种类型—匿名类型
顾名思义 匿名类型就是没有名字的类型.当一个新的匿名对象定义与前面已经存在的类型定义的内部变量类型同样时,编译器就会仅仅生成一个类定义,而不是各一个. 匿名类型对象中仍然能够再包括匿名对象. 在C#3 ...
- Struts 2最新0day破坏性漏洞（远程任意代码执行）等的重现方法
Struts 2的远程任意代码执行和重定向漏洞,是这两天互联网上最重大的安全事件,据说国内互联网企业中,很多电商纷纷中招,应该已经有大规模的用户隐私泄露.这里我们简单总结下怎样在自己机子上重现这些漏洞 ...
- Java与C#的语法区别（不断更新中...）
1.static关键字: 在java中静态成员能够被对象和类名调用: 在C#中,静态成员只能被类调用不能被对象调用. 2.for循环: 在java中可以在for前面添加标记,然后在for循环中可以br ...
- GDI GDI+ 的区别
GDI+是GDI的下一个版本,它进行了很好的改进,并且易用性更好.GDI的一个好处就是你不必知道任何关于数据怎样在设备上渲染的细节,GDI+更好的实现了这个优点,也就是说,GDI是一个中低层API,你 ...
- PHPCMS V9数据库配置文件database.php位置
初次用PHPCMS V9的朋友可能找不到数据库配置文件,其实在官方的wiki中已经介绍了.那就是 caches\configs\database.php 文件. 初次用PHPCMS V9的朋友可能找不 ...
- html5之拖放简单效果
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...
- 最长公共子序列python实现
最长公共子序列是动态规划基本题目,以下依照动态规划基本步骤解出来. 1.找出最优解的性质,并刻划其结构特征 序列a共同拥有m个元素,序列b共同拥有n个元素,假设a[m-1]==b[n-1],那么a[: ...
- 【Ubuntu】升到14，攻克了进入用户后没有菜单条导航栏的问题
控制台还能够进,用ctrl+alt+f1用老账号登录,用sudo adduser test新建立一个名字叫test的帐号 然后就能够进去了,可能是配置文件坏掉了