JS跨域问题详解

168 阅读 0 评论 111 点赞

我是靠谱客的博主寒冷茉莉，最近开发中收集的这篇文章主要介绍JS跨域问题详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。

　　JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略，在baidu.com下的页面中包含的JavaScript代码，不能访问在google.com域名下的页面内容；甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于，通过XMLHttpRequest实现的Ajax请求，不能向不同的域提交请求，例如，在abc.example.com下的页面，不能向def.example.com提交Ajax请求，等等。

　　然而，当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作，这时候“同源策略”就显得过于苛刻。本文就这个问题，概括了跨域所需要的一些技术。

　　下面我们分两种情况讨论跨域技术：首先讨论不同子域的跨域技术，然后讨论完全不同域的跨域技术。

（一）不同子域的跨域技术。
　　我们分两个问题来分别讨论：第一个问题是如何跨不同子域进行JavaScript调用；第二个问题是如何向不同子域提交Ajax请求。

先来解决第一个问题，假设example.com域下有两个不同子域：abc.example.com和def.example.com。现在假设在def.example.com下面有一个页面，里面定义了一个JavaScript函数：

复制代码代码如下:

function funcInDef() {

   .....

}

　　我们想在abc.example.com下的某个页面里调用上面的函数。再假设我们要讨论的abc.example.com下面的这个页面是以iframe形式嵌入在def.example.com下面那个页面里的，这样我们可能试图在iframe里做如下调用：

复制代码代码如下:

window.top.funcInDef();

　　好，我们注意到，这个调用是被前面讲到的“同源策略”所禁止的，JavaScript引擎会直接抛出一个异常。

　　为了实现上述调用，我们可以通过修改两个页面的domain属性的方法做到。例如，我们可以将上面在abc.example.com和def.example.com下的两个页面的顶端都加上如下的JavaScript代码片段：

复制代码代码如下:

<script type="text/javascript">

    document.domain = "example.com";

</script> 

　　这样，两个页面就变为同域了，前面的调用也可以正常执行了。

　　这里需要注意的一点是，一个页面的document.domain属性只能设置成一个更顶级的域名（除了一级域名），但不能设置成比当前域名更深层的子域名。例如，abc.example.com的页面只能将它的domain设置成example.com，不能设置成sub.abc.example.com，当然也不能设置成一级域名com。

　　上面的例子讨论的是两个页面属于iframe嵌套关系的情况，当两个页面是打开与被打开的关系时，原理也完全一样。

　　下面我们来解决第二个问题：如何向不同子域提交Ajax请求。

　　通常情况下，我们会用与下面类似的代码来创建一个XMLHttpRequest对象：

复制代码代码如下:

factories = [

    function() { return new XMLHttpRequest(); },

    function() { return new ActiveXObject("Msxml2.XMLHTTP"); },

    function() { return new ActiveXObject("Microsoft.XMLHTTP"); }

];

function newRequest() {

    for(var i = 0; i <</SPAN> factories.length; i++) {

        try{

            var factory = factories[i];

            return factory();

        } catch(e) {}

    }

    return null;

}

　　上面的代码中引用ActiveXObject，是为了兼容IE6系列浏览器。每次我们调用newRequest函数，就获得了一个刚刚创建的Ajax对象，然后用这个Ajax对象来发送HTTP请求。例如，下面的代码向abc.example.com发送了一个GET请求：

复制代码代码如下:

var request = newRequest();

request.open("GET", "http://abc.example.com" );

request.send(null);

　　假设上面的代码包含在一个abc.example.com域名下的页面里，则这个GET请求可以正常发送成功，没有任何问题。然而，如果现在要向def.example.com发送请求，则出现跨域问题，JavaScript引擎抛出异常。

　　解决的办法是，在def.example.com域下放置一个跨域文件，假设叫crossdomain.html；然后将前面的newRequest函数的定义移到这个跨域文件中；最后像之前修改document.domain值的做法一样，在crossdomain.html文件和abc.example.com域下调用Ajax的页面顶端，都加上：

复制代码代码如下:

[code]
<iframe name="xd_iframe" style="display:none" src="http://def.example.com/crossdomain.html"></iframe>

　　这时abc.example.com域下的页面和跨域文件crossdomain.html都在同一个域（example.com）下，我们可以在abc.example.com域下的页面中去调用crossdomain.html中的newRequest函数：

复制代码代码如下:

var request = window.frames["xd_iframe"].newRequest();

　　这样获得的request对象，就可以向http://def.example.com发送HTTP请求了。

（二）完全不同域的跨域技术。
　　如果顶级域名都不相同，例如example1.com和example2.com之间想通过JavaScript在前端通信，则所需要的技术更复杂些。

　　在讲解不同域的跨域技术之前，我们首先明确一点，下面要讲的技术也同样适用于前面跨不同子域的情况，因为跨不同子域只是跨域问题的一个特例。当然，在恰当的情况下使用恰当的技术，能够保证更优的效率和更高的稳定性。

　　简言之，根据不同的跨域需求，跨域技术可以归为下面几类：

1、JSONP跨域GET请求
2、通过iframe实现跨域
3、flash跨域HTTP请求
4、window.postMessage

本文先到这里，后续我们再详细介绍上面提到的4种跨域技术，稍后就奉上！