JS8 -- 跨域

1、location.hash + iframe

①.利用 iframe 、 location.hash 传值

②.a访问c，通过b来传播 (a、b同域名，c另外域名)

a.html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>a.html</title></head>

<body>
	<p>我是a.html页面</p>
	<!-- 引入c.html页面 -->
  <iframe src="http://01.tpqi-e.com/c.html#iloveyou"></iframe>
  <script>
    window.onhashchange = function () { 
    	//检测hash的变化
      console.log('a.html' + location.hash);
    }
  </script>
</body>
</html>

b.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>b.html</title></head>

<body>
	<p>我是b.html页面</p>
  <script>
    window.parent.parent.location.hash = location.hash
    //b.html将结果放到a.html的hash值中，b.html可通过parent.parent访问a.html页面
  </script>
</body>
</html>

c.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>c.html</title></head>

<body>
	<p>我是c.html页面</p>
	<script type="text/javascript">
		console.log('c.html' + location.hash);
		// 1、创建"iframe"元素
		let iframe = document.createElement('iframe');
		// 2、创建"iframe"元素的src地址为b.html页面
		iframe.src = 'http://www.xiaoheikeji.net/index/b.html#idontloveyou';
		// 3、"iframe"元素添加到document.body里面              <body> <iframe></iframe> </body>
		document.body.appendChild(iframe);
	</script>
</body>
</html>

2、window.name + iframe

window.name 属性的独特之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

a页面通过iframe引入c页面，c页面的window.name可以被跨域访问，b页面代理访问window.name,a页面iframe改为b页面间接获取c页面数据

①.利用 iframe 、 window.name 传值

②.a访问c，通过b来传播 (a、b同域名，c另外域名)，b是空文件

//a.html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>a页面</title></head>

<body>
  a页面
  <iframe src="http://01.tpqi-e.com/c.html" frameborder="0" onload="load()" id="iframe"></iframe>
  <script type="text/javascript">
    let first = true
    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    function load() {
      if(first){
      // 第1次onload(跨域页)成功后，切换到同域代理页面
        let iframe = document.getElementById('iframe');
        iframe.src = 'http://www.xiaoheikeji.net/index/b.html';
        first = false;
      }else{
      // 第2次onload(同域b.html页)成功后，读取同域window.name中数据
        console.log(iframe.contentWindow.name);
      }
    }
  </script>
</body>
</html>

View Code

//c.html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>c页面</title></head>

<body>
  c页面
  <script type="text/javascript">
      window.name = '我是c页面的数据哟！'
  </script>
</body>
</html>

View Code

2、document.domain + iframe

主域名相同，二级域名不同

只需要给页面添加 document.domain ='aokete.com' 表示二级域名都相同就可以实现跨域。

实现原理：两个页面都通过 js 强制设置 document.domain 为基础主域，就实现了同域。

//a.html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>A页面</title></head>

<body>
  A页面
  <iframe src="http://www.aokete.com/b.html" frameborder="0" onload="load()" id="frame"></iframe>
  <script>
    document.domain = 'aokete.com'
    function load() {
      console.log(frame.contentWindow.b);
    }
  </script>
</body>
</html>

View Code

//b.html
<!DOCTYPE html><html><head><meta charset='utf-8' /><title>B页面</title></head>

<body>
  B页面
    <script>
        document.domain = 'aokete.com'
        var b = '我是B页面数据';
    </script>
</body>
</html>

View Code

4.jsonp

<script>, 只支持get

5.cors

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS

jsonp、postMessage、websocket、node、nginx

CORS 支持所有类型的 HTTP 请求，是跨域 HTTP 请求的根本解决方案

JSONP 只支持 GET 请求，JSONP 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据。

不管是 Node 中间件代理还是 nginx 反向代理，主要是通过同源策略对服务器不加限制。日常工作中，用得比较多的跨域方案是 cors 和 nginx 反向代理

跨域

#图片

this.uh.crossOrigin = "anonymous"