前端基础系列--常用跨域处理
一、单向跨域
1.JSONP(JSON with padding),主要使用<script> 标签的跨域能力执行请求,例如:在wwww.a.com页面上,请求www.b.com的数据资源,实现代目如下
<!-- www.a.com 页面请求 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JSONP</title> </head> <body> <script type="text/javascript"> // 声明回调具体的处理函数 function handleCallback(data){ console.log(data); } </script> <!-- 发起JSONP 请求,并携带回调处理函数的名字,以便服务器返回处理, 返回文件中是一段可执行的javascript脚本,如:handleCallback(['data1', 'data2']) --> <script type="text/javascript" src="www.b.com/sever?jsonp=handleCallback"></script> </body> </html>
2.img标签请求,主要用于统计数据
<!-- www.a.com 页面请求 --> <img src="www.b.com/serve" />
3.使用 window.name 进行数据的访问,由于 window.name 属性不会因为location的变化而变化,所以可以使用这个特性进行数据的传递,例如:在www.a.com页面中,使用iframe,先设置iframe的src为 www.b.com下的页面,等待加载完成,拿取需要的数据,并把数据赋值给 window.name 属性中,这时将src属性再替换为 www.a.com下的页面,这时获取 window.name 的数据,即可实现跨域请求
4.CORS(access control) 跨域资源共享,浏览器新特性,主要处理请求头部(origin)及响应头部的(Access-control-allow-origin)的允许域名及端口
5.server proxy(代理),全部请求都请求向一个域名,然后服务器处理这些请求时,进行自动代理到,另外的服务器,(同源策略只是针对浏览器)
二、双向跨域
1.设置document.domain:主要用于,主域与子域,子域与子域之间的通信
2.使用 window.postMessage(新特性)进行通信,可以配合iframe使用,监听window.onMessage 事件,即可进行通信
【结束语】
系列文章,包括了原创,翻译,转载等各类型的文章;一方面是为了自己总结,另一方面页希望可以共享知识;在技术方面有输入,也要有所输出,才能更进一步!文章基于自己的实践、阅读及理解,如有不合理及错误的地方,烦请各大佬评论指出,以便改正,谢谢!