`
daochuliudeyu
  • 浏览: 6672 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

关于JS的跨域通信的几种解决方案

 
阅读更多

1.什么引起了ajax不能跨域请求的问题?
ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告。

2.有什么完美的解决方案么?
没有。解决方案有不少,但是只能是根据自己的实际情况来选择。

具体情况有:
一、本域和子域的相互访问: www.aa.com和book.aa.com
二、本域和其他域的相互访问: www.aa.com和www.bb.com 用 iframe
三、本域和其他域的相互访问: www.aa.com和www.bb.com 用 XMLHttpRequest访问代理
四、本域和其他域的相互访问: www.aa.com和www.bb.com 用 JS创建动态脚本


解决方法:
一、如果想做到数据的交互,那么www.aa.com和book.aa.com必须由你来开发才可以。可以将book.aa.com用iframe添加到 www.aa.com的某个页面下,在www.aa.com和iframe里面都加上document.domain = "aa.com",这样就可以统一域了,可以实现跨域访问。就和平时同一个域中镶嵌iframe一样,直接调用里面的JS就可以了。(这个办法我没有尝试,不过理论可行)


二、当两个域不同时,如果想相互调用,那么同样需要两个域都是由你来开发才可以。用iframe可以实现数据的互相调用。解决方案就是用window.location对象的hash属性。hash属性就是http://domian/web/a.htm#dshakjdhsjka 里面的#dshakjdhsjka。利用JS改变hash值网页不会刷新,可以这样实现通过JS访问hash值来做到通信。不过除了IE之外其他大部分浏览器只要改变hash就会记录历史,你在前进和后退时就需要处理,非常麻烦。不过再做简单的处理时还是可以用的。大体的过程是页面a和页面b在不同域下,b通过iframe添加到a里,a通过JS修改iframe的hash值,b里面做一个监听(因为JS只能修改hash,数据是否改变只能由b自己来判断),检测到b的hash值被修改了,得到修改的值,经过处理返回a需要的值,再来修改a的hash值(这个地方要注意,如果a 本身是那种查询页面的话比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是无法取得数据的,同样报没有权限的错误,需要a把这个传过来,所以也比较麻烦),同样a里面也要做监听,如果hash变化的话就取得返回的数据,再做相应的处理。


三、这种情形是最经常遇到的,也是用的最多的了。就是www.aa.com和www.bb.com你只能修改一个,也就是另外一个是别人的,人家告诉你你要取得数据就访问某某连接参数是什么样子的,最后返回数据是什么格式的。而你需要做的就是在你的域下新建一个网页,让服务器去别人的网站上取得数据,再返回给你。domain1下的a向同域下的GetData.aspx请求数据,GetData.aspx向domain2下的 ResponseData.aspx发送请求,ResponseData.aspx返回数据给GetData.aspx, GetData.aspx再返回给a,这样就完成了一次数据请求。GetData.aspx在其中充当了代理的作用。具体可以看下我的代码。


四、这个和上个的区别就是请求是使用<script>标签来请求的,这个要求也是两个域都是由你来开发才行。原理就是JS文件注入,在本域内的a 内生成一个JS标签,它的SRC指向请求的另外一个域的某个页面b,b返回数据即可,可以直接返回JS的代码。因为script的src属性是可以跨域的。具体看代码,这个也比较简单。

总结:
第一种情况:域和子域的问题,可以完全解决交互。
第二种情况:跨域,实现过程非常麻烦,需要两个域开发者都能控制,适用于简单交互。
第三种情况:跨域,开发者只控制一个域即可,实现过程需要增加代理取得数据,是常用的方式。
第四种情况:跨域,两个域开发者都需要控制,返回一段js代码。


还有一种是使用jquery 的getJSON 方法,$.getJSON(url, function(data) {
alert(data.status);
});

分享到:
评论

相关推荐

    解决JS跨域访问IFrame的解决方案

    面对这样的问题,我们可以采用以下几种跨域解决方案: 1. **CORS(Cross-Origin Resource Sharing)**:服务器可以通过设置响应头`Access-Control-Allow-Origin`来允许特定的源进行跨域请求。例如,服务器端可以在...

    JavaScript 跨域通信方法

    本文将详细介绍几种有效的跨域通信方法,特别是针对父子页面之间的跨域通信。 #### 二、同源策略概述 同源策略是Web浏览器的一项安全措施,它的核心思想是:来自不同源的"document"或脚本只能读取或设置来自同一源...

    跨域访问解决方案,关于跨域访问cookie的资料

    为了解决这一问题,并确保在跨域场景下可以正确地处理Cookie信息,本文将详细介绍几种常用的跨域访问解决方案及其在处理Cookie方面的应用。 #### 一、跨域访问解决方案概述 跨域访问是指一个域名下的文档或脚本...

    JS跨域访问解决方案总结

    JavaScript跨域访问解决方案 在Web开发中,由于浏览器的安全策略——同源策略(Same Origin Policy),不同源的脚本之间无法直接通信或访问彼此的资源。同源策略规定,只有当两个URL的协议、域名和端口都相同时,...

    跨域有几种解决方式?原理是什么?跨域.docx

    针对跨域问题,有多种解决方案,每种方法都有其适用场景和技术原理: 1. **CORS(Cross-Origin Resource Sharing)** - **原理**:通过HTTP头部信息实现跨域访问控制。目标服务器可以在响应头中添加`Access-...

    什么是跨域解决方案有哪些.docx

    同源策略限制以下几种行为: 1. Cookie、LocalStorage 和 IndexDB 无法读取 2. DOM 和 Js 对象无法获得 3. AJAX 请求不能发送 常见跨域场景: 1. 跨域资源共享(CORS) 2. 通过 jsonp 跨域 3. document.domain + ...

    解决跨域的几种方法.zip

    每种方法都有其适用场景和优缺点,开发者需要根据实际需求选择合适的跨域解决方案。例如,CORS和JSONP适合大部分情况,但CORS需要服务器配合,而JSONP仅限GET请求;IFrame适合处理跨域的嵌入内容;postMessage适用于...

    JS跨域请求解决方案.docx

    针对以上提到的问题,下面将详细介绍几种常用的跨域解决方案: 1. **通过JSONP跨域** JSONP(JSON with Padding)是一种常用的方法来绕过同源策略限制,允许在不同源之间交换数据。该方法利用`&lt;script&gt;`标签的...

    web跨域解决方案.docx

    它的原理是使用 postMessage 方法来实现跨域通信。 ### 5. 使用 window.name 来进行跨域 使用 window.name 来进行跨域是一种跨域解决方案。它的原理是使用 window.name 属性来实现跨域访问。 跨域的原理解析及...

    前端开发中常用的几种跨域解决方案.docx

    5. **Post Message(利用iframe)**:通过在父窗口和iframe之间使用`postMessage`和`message`事件,可以实现在不同源之间传递信息,达到跨域通信的目的。 【每种方案的优缺点】 - JSONP简单易用,但仅限GET请求,...

    完美解决iframe跨域问题

    然而,有时我们需要在不同的域之间共享数据或者嵌入其他网站的内容,这时候`iframe`(Inline Frame)就成为了一种常用的解决方案。本文将深入探讨如何“完美解决iframe跨域问题”,并介绍其底层的`window.name`转换...

    跨域的简介与解决方案.docx

    跨域问题的具体表现形式多样,主要包括以下几种情况: - **不同文件**:在同一域名下,不同文件之间的相互调用不被认为是跨域问题。 - **不同域名**:例如,从`www.abc.com`调用`www.efg.com`下的资源,被视为跨域...

    前端解决跨域问题的8种方案.docx

    接下来,我们将详细介绍几种常见的前端跨域解决方案: 1. **`document.domain` + iframe(仅限主域相同的情况)** 当两个页面的主域相同但子域不同时,可以通过设置`document.domain`来实现跨域访问。例如,在`...

    javascript跨域原因以及解决方案分享

    解决JavaScript跨域问题的方法多种多样,主要包括以下几种: 1. JSONP(JSON with Padding):利用`&lt;script&gt;`标签不受同源策略限制的特性,通过动态创建`&lt;script&gt;`标签,并将回调函数名作为参数传递给服务器。...

    跨域请求的几种方式

    ### 跨域请求的几种方式 #### 一、前言 在现代Web开发中,由于浏览器的安全机制——同源策略,对于跨域请求的支持成为了一个常见的需求。所谓跨域,是指当请求的目标URL与当前页面地址在协议、域名、端口三者中...

    js中几种实用的跨域方法原理详解

    本文将详细介绍几种常见的JavaScript跨域方法。 1. JSONP(JSON with Padding) JSONP是一种早期的跨域解决方案,利用了HTML允许从不同源动态加载脚本的特性。当通过AJAX请求JSON数据时,由于同源策略限制,直接请求...

    js跨域调用

    1. **JSONP (JSON with Padding)**:这是一种老式的跨域解决方案,通过动态插入`&lt;script&gt;`标签来实现。因为`&lt;script&gt;`标签不受同源策略限制,可以加载来自不同源的脚本。服务器返回的不是JSON数据,而是包裹在函数...

    SpringBoot应用跨域访问解决方案.docx

    ### SpringBoot应用跨域访问解决方案 #### 一、什么是跨域访问 跨域访问是指当一个域下的文档或...通过以上几种方法,开发者可以根据实际需求选择最适合的CORS实现方式,确保应用程序能够安全有效地处理跨域请求。

    showModalDialog跨域解决例子

    2. **JSONP(JSON with Padding)**:这是一种较旧的跨域解决方案,适用于只支持GET请求的情况。JSONP依赖于动态插入`&lt;script&gt;`标签,通过回调函数接收服务器返回的JSON数据。由于`&lt;script&gt;`标签不受同源策略限制,...

    Jquery跨域请求的实现

    CORS是一种更现代且安全的跨域解决方案,它通过设置HTTP头信息来允许浏览器与服务器之间进行跨域通信。在服务器端,我们需要设置`Access-Control-Allow-Origin`头部,允许特定或所有源的请求。在jQuery的AJAX请求中...

Global site tag (gtag.js) - Google Analytics