【9大跨域解决方案】document.domain解决跨域的原理

document.domain笔记

一级域名与二级域名

直接看例子就能明白:

• 一级域名：www.baidu.com
• 二级域名：music.baidu.com

显然，这是跨域的

本地设置不同域名

可以通过配置host文件来设置不同的域名

• 一般host文件的目录为：C:\Windows\System32\drivers\etc

 127.0.0.1       www.yuhua.com
    127.0.0.1       a.yuhua.com
    127.0.0.1       b.yuhua.com

这样的配置的意思就是，当你去访问www.yuhua.com 或 a.yuhua.com 或 b.yuhua.com的时候，会去访问对应地址前面的ip，这里，这三个域名都是会去访问127.0.0.1

如何通过document.domain实现跨域

document.domain这个方法使用极其简单，但是也有较大的限制，主要用于主域相同的域之间的数据通信。
下面简单举例说明：

• 前提准备：
• http://a.yuhua.com:3000/a.html起a.html
• http://b.yuhua.com:3000/b.html起b.html

显然，两者是跨域的。

• 需求：在a上获取b的数据
• 思路：通过document.domain为"yuhua.com"的方式获取
• 具体实现：

 //a.html
 <iframe src="http://b.yuhua.com:4000/b.html" "load()" id="frame"></iframe>
 <script type="text/javascript">
   document.domain = 'yuhua.com';
   function load(){
    console.log(frame.contentWindow.name);
   }
 </script>

 //b.html
 <script type="text/javascript">
  document.domain = 'yuhua.com';
  var name = 'yuhua';
 </script>

• 现象：加载a.html，会打印"yuhua"
• 原因分析：当主域之间相互通信的时候，只要将两者的document.domain赋值为当前的主域地址，即可实现跨域通信。

---

实现跨域的9种方法(点击可跳转详情页面)

• jsonp
• cors
• postMessage
• document.domain
• window.name
• location.hash
• http-proxy 后续会有详细文章阐述
• nginx 后续会有详细版块阐述
• websocket