前端跨域解决方案（10）：document.domain

最新推荐文章于 2025-11-18 11:43:25 发布

原创

最新推荐文章于 2025-11-18 11:43:25 发布 · 997 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

1 document.domain 核心

同源策略要求两个页面的 协议、域名、端口 完全一致，否则视为跨域。例如：

主域名 site.com 与子域名 a.site.com 因域名不同，属于跨域；
http://a.site.com:8080 与 http://a.site.com:80 因端口不同，属于跨域。

document.domain 允许将子域的域名设置为共同的主域名（如 site.com），使浏览器认为不同子域 “同源”。核心逻辑如下：

主页面 a.site.com 设置 document.domain = 'site.com'；
iframe 页面 b.site.com 也设置 document.domain = 'site.com'；
浏览器基于共同的主域名，允许两者之间的跨域资源访问。

2 实战案例

2.1 本地环境配置

Windows 配置（修改 C:\Windows\System32\drivers\etc\hosts）

macOS/Linux 配置（修改 /etc/hosts，需管理员权限）：

127.0.0.1   a.site.com
127.0.0.1   b.site.com

2.2 主页面（a.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面 (a.site.com)</title>
</head>
<body>
    <iframe id="myIframe" src="http://b.site.com:4000/b.html" style="display: none;"></iframe>
    
    <script>
      // 关键步骤1：设置共同主域名，强制同源
      document.domain = 'site.com';
      
      window.onload = () => {
        const iframe = document.getElementById('myIframe');
        // 关键步骤2：跨域访问iframe内容（需iframe同步设置domain）
        try {
          const content = iframe.contentWindow.document.getElementById('container').innerHTML;
          console.log('获取到iframe内容:', content);
        } catch (error) {
          console.error('跨域访问失败，请检查domain设置:', error);
        }
      };
    </script>
</body>
</html>

2.3 iframe 页面（b.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe页面 (b.site.com)</title>
</head>
<body>
  <div id="container">这是b.site.com的内容</div>
  <script>
    // 必须与主页面设置相同的主域名，否则跨域限制仍生效
    document.domain = 'site.com';
  </script>
</body>
</html>