解决由浏览器的同源策略造成的跨域问题-案例

Posted 2022-01-11 JackieDYH

 跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

JSONP

JSONP 的原理很简单，就是利用 <script> 标签没有跨域限制的“漏洞”。通过 <script> 标签指向一个需要访问的地址，并且我们可以通过callback的形式就行后续的逻辑操作。

<script src="http://domain/api?param1=6&param2=66&param3=666&callback=jsonp"></script>
<script>
 function jsonp(data) 
 	console.log(data)
	
</script> 

从上面的demo可以看出JSONP 使用简单，但是只限于 get 请求。并且当我们的项目足够大的时候，我们会发现我们很容易写出同名的callback。

function jsonp(url, jsonpCallback, success) 
 let script = document.createElement("script");
 script.src = url;
 script.async = true;
 script.type = "text/javascript";
 window[jsonpCallback] = function(data) 
 success && success(data);
 ;
 document.body.appendChild(script);

// 使用方式
jsonp(
 "http://xxx",
 "callback",
 function(value) 
 console.log(value);
 
);

CORS

这种方式，相比较Jsonp，CORS相对繁琐一些。因为需要浏览器和后端同时支持。实现CORS通信的关键是后端。

只要后端实现了 CORS，就实现了跨域（浏览器会自动进行 CORS 通信）。当然，如果需要兼容IE8、9这种老古董。我们需要通过 XDomainRequest 来实现。

对于服务端来说，只需要设置
Access-Control-Allow-Origin 就可以开启 CORS。具体的内容后端的小伙伴肯定很清楚。

document.domain

这方式相对局限性比较的大，因为只能用于二级域名相同的情况下。

比如 a.mdove.com 和 b.mdove.com 适用于该方式。

当然用法也比较的简单，只需要给页面添加 document.domain = ‘mdove.com' 即可。这样当我们的二级域名都相同，就可以实现跨域了。

postMessage

这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息，另一个页面判断来源并接收消息。

// 发送消息端
window.parent.postMessage('message', 'http://test.com');
// 接收消息端
var mc = new MessageChannel();
mc.addEventListener('message', (event) => 
 var origin = event.origin || event.originalEvent.origin; 
 if (origin === 'http://test.com') 
 console.log('验证通过')
 
);