js跨域问题解决方案


1、JSON-P跨域

动态脚本注入的方法,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

2、window.name跨域

indow对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。 
数据大小有限制,大小一般为2M,IE和firefox下可以大至32M左右 
有三个页面: 
a.com/app.html:应用页面。 
a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。 
b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。 
实现起来基本步骤如下:

在应用页面(a.com/app.html)中创建一个iframe,把其src指向数据页面(b.com/data.html)。 
数据页面会把数据附加到这个iframe的window.name上,data.html代码如下:

  1. <script type="text/javascript">
  2. window.name = ‘I was there!‘; // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
  3. // 数据格式可以自定义,如json、字符串
  4. </script>

在应用页面(a.com/app.html)中监听iframe的onload事件,在此事件中设置这个iframe的src指向本地域的代理文件(代理文件和应用页面在同一域下,所以可以相互通信)。app.html部分代码如下:

  1. <script type="text/javascript">
  2. var state = 0,
  3. iframe = document.createElement(‘iframe‘),
  4. loadfn = function() {
  5. if (state === 1) {
  6. var data = iframe.contentWindow.name; // 读取数据
  7. alert(data); //弹出‘I was there!‘
  8. } else if (state === 0) {
  9. state = 1;
  10. iframe.contentWindow.location = "http://a.com/proxy.html"; // 设置的代理文件
  11. }
  12. };
  13. iframe.src = ‘http://b.com/data.html‘;
  14. if (iframe.attachEvent) {
  15. iframe.attachEvent(‘onload‘, loadfn);
  16. } else {
  17. iframe.onload = loadfn;
  18. }
  19. document.body.appendChild(iframe);
  20. </script>

获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。

  1. <script type="text/javascript">
  2. iframe.contentWindow.document.write(‘‘);
  3. iframe.contentWindow.close();
  4. document.body.removeChild(iframe);
  5. </script>

总结起来即:iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。 
引自:http://www.cnblogs.com/rainman/archive/2011/02/21/1960044.html

3、HTML5中新引进的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 * 。 
缺点是IE6、IE7不支持

4、iframe+document.domain来跨子域

我们只要把http://www.example.com/a.html 和 http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是,document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个,但是不可以设成 c.a.b.example.com,因为这是当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。

时间: 2024-08-29 17:33:17

js跨域问题解决方案的相关文章

js跨域及解决方案

1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名.协议和端口号的组合. 例如: URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://w

angular.js跨域post解决方案

跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(ur

Atitit.js跨域解决方案attilax大总结&#160;后台java&#160;php&#160;c#.net的CORS支持

Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持 1. 设置 document.domain为一致  推荐1 2. Apache 反向代理 推荐1 3. jsonp ,2 4. CORS ,2 5. iframe+post3 6. 回调解决方案>>服务端推送dwr 反向ajax3 7. 服务器中转 3 8. Js跨3 9. 从所有的浏览器都支持来看,CORS将成为未来跨域访问的标准解决方案3 10. 参考4 1. 设置 document.do

js跨域原理及解决方案

方法一:jsonp函数 在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,基于script标签实现跨域.script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签. var script = document.createElement('script'); script.src = "http://aa.xx.com/js/*.js"; document.bod

js跨域请求方式 ---- JSONP原理解析

这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从而

JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

问卷项目--js跨域

项目中因为要把问卷投放到第三方,并且对方要收集统计数据,因此在调用对方接口的时候就会存在跨域的问题. 1. 什么叫js跨域 浏览器不允许javascript跨域请求其他域名下的内容.端口号不同,主域相同子域不同,协议不同,不同域名等等情况 下面表格里的a.js是无法获取b.js的内容的. 情况 举例 端口号不同 http://www.baidu.com/a.js   vs.  http://www.baidu.com:8080/b.js 主域相同子域不同 http://www.baidu.com

jquery跨域访问解决方案

客户端“跨域访问”一直是一个头疼的问题,好在有jQuery帮忙,从jQuery-1.2以后跨域问题便迎刃而解.由于自己在项目中遇到跨域问题,借此机会对跨域问题来刨根问底,查阅了相关资料和自己的实践,算是解决了跨域问题.便记录下来,以供查阅.         jQuery.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的.        真实案例:        $.ajax({             async:false,             url: 'http:

C#进阶系列——WebApi 跨域问题解决方案:CORS

from:http://www.cnblogs.com/landeanfen/p/5177176.html 阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2.场景测试 四.总结 正文 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨域问题一些细节. WebApi系列文章 C#进阶系列--WebApi接口测试工具:WebApiTestClient C#进阶系列