详解JavaScript跨域总结与解决办法

作者：木棉时间：2026-10-30 15:58:17浏览：511

本文深入解析JavaScript同源策略导致的跨域限制，并系统梳理了前台处理跨域的多种技术方案。内容涵盖通过document.domain结合iframe、动态创建script节点实现JSONP、利用location.hash传递数据、基于window.name的大容量数据传输，以及HTML5标准的postMessage接口。此外还简要提及Flash跨域策略，帮助开发者根据具体场景选择合适的前台跨域通信方式。

跨域概念与同源策略

什么是跨域

出于安全考量，JavaScript默认禁止跨域调用其他页面的对象。然而，这一安全限制在涉及iframe嵌入或Ajax应用时，往往带来诸多不便。本文旨在简要梳理与跨域相关的关键问题及应对思路。

所谓跨域，简而言之，即受限于JavaScript的同源策略，使得a.com域名下的脚本无法操作b.com或c.a.com域名下的对象。具体判定规则可参考下表：

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

需特别注意以下两点：

首先，若跨域是由协议或端口差异引起，前端通常无法直接解决。

其次，在跨域判定中，浏览器仅依据“URL的首部”进行识别，不会尝试判断相同IP地址是否对应多个域，或不同域是否位于同一IP上。

“URL的首部”定义为window.location.protocol加上window.location.host，即要求“域名、协议和端口必须匹配”。

接下来简要总结前端常见的跨域处理方案。涉及后台代理（proxy）的方案因需配置后端环境，此处不予展开。

document.domain与iframe方案

1、通过document.domain结合iframe设置针对主域相同但子域不同的场景，可通过设置document.domain来解决。具体操作是在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别执行document.domain = 'a.com'；随后在a.html中创建一个iframe，通过控制其contentDocument，实现两个js文件间的“交互”。此方法仅适用于主域相同且二级域名不同的情况，若强行将script.a.com的domain设置为alibaba.com，将会报错。代码如下：

www.a.com上的a.html


document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
  var doc = ifr.contentDocument || ifr.contentWindow.document;
  // 在这里操纵b.html
  alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

script.a.com上的b.html


document.domain = 'a.com';

该方式适用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中任何页面间的相互通信。

备注：某页面的domain默认等于window.location.hostname。主域名指不带www的域名（如a.com），带前缀的通常视为二级或多级域名（如www.a.com为二级域名）。domain只能设置为主域名，严禁在b.a.com中将domain设置为c.a.com。

存在的问题：

1、安全性风险：若一个站点（b.a.com）遭受攻击，另一个站点（c.a.com）可能随之出现安全漏洞。

2、若页面中引入多个iframe，要操作所有iframe，必须将它们都设置为相同的domain。

动态Script标签与JSONP

2、动态创建script标签

尽管浏览器默认禁止跨域访问，但并不禁止在页面中引用其他域的JS文件，且可自由执行引入的JS文件中的function（包括操作cookie、Dom等）。基于此特性，可通过动态创建script节点来实现完全跨域的通信。具体实现可参考YUI的Get Utility。

判断script节点加载完毕的过程颇具趣味：IE仅支持通过script的readystatechange属性判断，而其他浏览器则支持script的load事件。以下是部分判断script加载完毕的方法示例。


js.onload = js.onreadystatechange = function() {
  if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
    // callback在此处执行
    js.onload = js.onreadystatechange = null;
  }
};

location.hash传值方案

3、利用iframe和location.hash

此方法较为曲折，但能解决完全跨域下的脚本置换问题。其原理是利用location.hash进行传值。在url：http://a.com#helloword中，‘#helloworld'即为location.hash。改变hash值不会导致页面刷新，因此可利用hash值传递数据，尽管数据容量有限。假设域名a.com下的cs1.html需与cnblogs.com域名下的cs2.html传递信息，cs1.html首先自动创建一个隐藏的iframe，其src指向cnblogs.com域名下的cs2.html页面，此时hash值可作为参数传递。cs2.html响应请求后，通过修改cs1.html的hash值来传递数据（由于两页面不同域，IE和Chrome不允许修改parent.location.hash，故需借助a.com域名下的一个代理iframe；Firefox则允许直接修改）。同时在cs1.html上设置定时器，定期检测location.hash是否变化，一旦变化即获取hash值。代码如下：

a.com下的文件cs1.html文件：


function startRequest(){
  var ifr = document.createElement('iframe');
  ifr.style.display = 'none';
  ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';
  document.body.appendChild(ifr);
}

function checkHash() {
  try {
    var data = location.hash ? location.hash.substring(1) : '';
    if (console.log) {
      console.log('Now the data is '+data);
    }
  } catch(e) {};
}
setInterval(checkHash, 2000);

cnblogs.com域名下的cs2.html：


//模拟一个简单的参数处理操作
switch(location.hash){
  case '#paramdo':
    callBack();
    break;
  case '#paramset':
    //do something……
    break;
}

function callBack(){
  try {
    parent.location.hash = 'somedata';
  } catch (e) {
    // ie、chrome的安全机制无法修改parent.location.hash，
    // 所以要利用一个中间的cnblogs域下的代理iframe
    var ifrproxy = document.createElement('iframe');
    ifrproxy.style.display = 'none';
    ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';  // 注意该文件在"a.com"域下
    document.body.appendChild(ifrproxy);
  }
}

a.com下的域名cs3.html


//因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);

当然，这种做法存在诸多缺点，例如数据直接暴露在URL中，且数据容量和类型均受限。

window.name跨域方案

4、利用window.name实现跨域数据传输

涉及三个页面：

a.com/app.html：应用页面。
a.com/proxy.html：代理文件，通常为无内容的html文件，需与应用页面同域。
b.com/data.html：应用页面需获取数据的页面，即数据页面。

基本实现步骤如下：

1、在应用页面（a.com/app.html）中创建一个iframe，将其src指向数据页面（b.com/data.html）。数据页面会将数据附加到该iframe的window.name上，data.html代码如下：


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

2、在应用页面（a.com/app.html）中监听iframe的onload事件，在此事件中将该iframe的src设置为本地域的代理文件（代理文件与应用页面同域，故可相互通信）。app.html部分代码如下：


<script type="text/javascript">
  var state = 0, 
  iframe = document.createElement('iframe'),
  loadfn = function() {
    if (state === 1) {
      var data = iframe.contentWindow.name;  // 读取数据
      alert(data);  //弹出'I was there!'
    } else if (state === 0) {
      state = 1;
      iframe.contentWindow.location = "http://a.com/proxy.html";  // 设置的代理文件
    } 
  };
  iframe.src = 'http://b.com/data.html';
  if (iframe.attachEvent) {
    iframe.attachEvent('onload', loadfn);
  } else {
    iframe.onload = loadfn;
  }
  document.body.appendChild(iframe);
</script>

3、获取数据后销毁该iframe，释放内存；这也保障了安全性（防止其他域frame访问js）。


<script type="text/javascript">
  iframe.contentWindow.document.write('');
  iframe.contentWindow.close();
  document.body.removeChild(iframe);
</script>

HTML5 postMessage接口

5、使用HTML5 postMessage

HTML5中最酷的新功能之一是跨文档消息传输（Cross Document Messaging）。下一代浏览器均支持此功能：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+。Facebook已使用此功能，通过postMessage支持基于web的实时消息传递。

otherWindow.postMessage(message, targetOrigin);

otherWindow：对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。

message：所要发送的数据，string类型。

targetOrigin：用于限制otherWindow，“*”表示不作限制

a.com/index.html中的代码：


<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
  var ifr = document.getElementById('ifr');
  var targetOrigin = 'http://b.com'; // 若写成'http://b.com/c/proxy.html'效果一样
                    // 若写成'http://c.com'就不会执行postMessage了
  ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>

b.com/index.html中的代码：


<script type="text/javascript">
  window.addEventListener('message', function(event){
    // 通过origin属性判断消息来源地址
    if (event.origin == 'http://a.com') {
      alert(event.data);  // 弹出"I was there!"
      alert(event.source); // 对a.com、index.html中window对象的引用
                 // 但由于同源策略，这里event.source不可以访问window对象
    }
  }, false);

Flash跨域策略

6、利用flash 此法源自YUI3的IO组件。可在Adobe Developer Connection查阅更多跨域代理文件规范：ross-Domain Policy File Specifications、HTTP Headers Blacklist。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString

2026-11-05 17:09:21

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01