1 / 13
文档名称:

web跨域解决方案.docx

格式:docx   大小:123KB   页数:13页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

web跨域解决方案.docx

上传人:科技星球 2022/3/9 文件大小:123 KB

下载得到文件列表

web跨域解决方案.docx

相关文档

文档介绍

文档介绍:web跨域解决方案
 
   
 
 
 
 
 
 
 
     
 
 
 
 
 
阅读目录
什么是跨域
常用的几种跨域处理方法:
跨域的原理解析及实现方法
总结
摘要:跨域问题,无 }
});
上面的代码中,callback是必须的,callback是什么值要跟后台拿。获取到的jsonp数据格式如下:
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
jsonp的全称为json with padding,上面的数据中,flightHandler就是那个padding.
 JSONP的不足之处:
  1、只能使用get方法,不能使用post方法:
  我们知道 script,link, img 等等标签引入外部资源,都是 get 请求的,那么就决定了 jsonp 一定是 get 的。但有时候我们使用的 post 请求也成功,为啥呢?这是因为当我们指定dataType:'jsonp',不论你指定:type:"post" 或者type:"get",其实质上进行的都是 get 请求!
  2、没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。
 2、CORS策略
 原理:
     CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.
  CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。
实现方法:
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
  整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
前端方面
以前我们使用Ajax,代码类似于如下的方式:
var xhr = new XMLHttpRequest();
("GET", "/hfahe", true);
();
// 这里的“/hfahe”是本域的相对路径。
如果我们要使用CORS,相关Ajax代码可能如下所示:
var xhr = new XMLHttpRequest();
("GET", "", true);
();
// 请注意,代码与之前的区别就在于相对路径换成了其他域的绝对路径,也就是你要跨域访问的接口地址。
服务器方面 服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。
CORS策略的优缺点:
  优点:
1、CORS支持所有类型的HTTP请求。
2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
 缺点: 兼容性方面相对差一点,ie10或以上才支持
3、+iframe的设置  (只有在主域相同的时候才能使用该方法)
原理:
  浏览器中不同域的框架之间是不能进行js的交互操作的。但是不同的框架之间(父子或同辈),是能够获取到彼此的window对象的,但是,我们也只能获取到一个几乎
无用的window对象。比如,有一个页面,它的地址是 , 在这个页面里面有一个iframe,它的src是 , 很显然,这
个页面与它里面的iframe框架是不同域的,所以我们是无法通过在页面中书写js代码来获取iframe中的东西的。
  这个时候,,我们只要把