前端跨域解决方案(10):document.domain

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)




    
    
    主页面 (a.site.com)


    
    
    

2.3 iframe 页面(b.html)




    
    
    iframe页面 (b.site.com)


  
这是b.site.com的内容

3 注意事项与限制

  1. 端口号限制:document.domain 仅解决域名跨域,端口号必须一致。例如:http://a.site.com:8080 与 http://a.site.com:80 即使设置 document.domain = 'site.com',仍因端口不同无法跨域。

  2. 协议兼容性:若主页面为 https,iframe 页面为 http,设置 document.domain 后仍可能因协议不同被浏览器拦截(取决于浏览器安全策略)。

  3. 跨主域名无效:document.domain 仅适用于 同主域名下的子域(如 a.site.com 和 b.site.com),无法解决不同主域名(如 site.com 和 other.com)的跨域问题。

  4. 现代浏览器安全策略:部分浏览器(如 Chrome)对 document.domain 的使用增加了限制,例如:

  • 需配合 postMessage 实现更安全的跨域通信(推荐组合使用)。

  • 若页面通过 file:// 协议打开(本地文件),document.domain 可能失效;

4 应用场景举例

  • 多子域管理系统:主域名 admin.site.com 与子域名 user.admin.site.com 共享数据;

  • 内嵌第三方组件:若第三方组件与主站同主域名,可通过 document.domain 实现通信;

  • iframe 跨域数据获取:如主页面获取内嵌报表页面(同主域名)的数据内容。

通过 document.domain 实现跨域的核心在于 “强制同源”,但需严格遵守其限制条件。在实际开发中,建议根据场景选择更安全、兼容性更强的跨域方案(如 CORS + postMessage),以平衡功能需求与安全风险。

前端跨域解决方案对比:

方案

核心原理

优点

缺点

适用场景

JSONP

你可能感兴趣的:(前端跨域解决方案汇总,前端,javascript)