master

分支 (1)

管理

管理

master

big-front-end
/
js跨域_同源政策及解决跨域.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>js跨域_同源政策及解决跨域</title>
	</head>
	<body>


	</body>
	<script type="text/javascript">
		一. 同源政策： 同源的指的是两个域的协议、 域名、 端口号必须相同， 否则则不属于同一个域。
		--同源政策主要限制了三个方面：
		--当前域下的 js 脚本不能够访问其他域下的 cookie、 localStorage 和 indexDB；
		--js 脚本不能够操作访问操作其他域下的 DOM；
		--当前域下 ajax 无法发送跨域请求


		二. 如何解决跨域问题：
		1.通过 jsonp 跨域：
		-- 原理是， 动态添加一个 < script > 标签， 而script标签的src属性是没有跨域的限制的。
		// 原生实现
		var script = document.createElement('script');
		script.type = 'text/javascript';
		// 传参并指定回调执行函数为callBack
		script.src = 'http://xxxx.com?callback=callBack';
		document.head.appendChild(script); // 回调执行函数
		function callBack(res) {
			alert(JSON.stringify(res));
		}

		// jq实现：
		$.ajax({
		　　url: 'http://xxxx.com',
		　　type: 'get',
		　　dataType: 'jsonp', //请求方式为jsonp
		　　jsonpCallback: "callBack",//自定义回调函数名
		　　data: {}
		});

		//vue实现
		this.$http.jsonp('http://xxx.com', {
		　　params: {},
		　　jsonp: 'callBack'
		}).then((res) => {
		　　console.log(res);
		})

		-- jsonp它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。


		2.document.domain + iframe跨域（仅限主域相同，子域不同的跨域应用场景）
		  -- 实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域；需要一级域名一致才可以
		  （1）父窗口：(http://www.domain.com/a.html)
		  <iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
		  <script>
		  　　document.domain = 'domain.com';
		  　　var res= 'data';
		  </script>
		  （2）子窗口：(http://child.domain.com/b.html)
		  <script>
		  　　document.domain = 'domain.com';
		  　　// 获取父窗口中变量
		  　　console.log('res' + window.parent.res);
		  </script>


		  3.location.hash + iframe
		  -- 实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

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


		  5.postMessage跨域
			-- postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
			  a.） 页面和其打开的新窗口的数据传递
			  b.） 多窗口之间消息传递
			  c.） 页面与嵌套的iframe消息传递
			  d.） 上面三个场景的跨域数据传递

			  用法：postMessage(data,origin)方法接受两个参数
			  data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
			  origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

			  6. nginx代理跨域


			  原文：https://www.cnblogs.com/lhl66/p/10238961.html

	</script>
</html>