脚本宝典收集整理的这篇文章主要介绍了四种跨域解决方案,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
作为人们日常PC端的浏览的入口,浏览器出于安全考虑,采用了同源策略。换句话说,如果协议/域名/端口有一个不同,那么就不符合此同源的前提。此时就需要跨域,否则Ajax请求(任何网络请求)会失败。
JSONP 的原理很简单,就是利用 <script> 标签没有跨域限制的“漏洞”。通过 <script> 标签指向一个需要访问的地址,并且我们可以通过callback的形式就行后续的逻辑操作。
<script src="http://domain/api?param1=6&param2=66¶m3=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); } );
这种方式,相比较Jsonp,CORS相对繁琐一些。因为需要浏览器和后端同时支持。实现CORS通信的关键是后端。
只要后端实现了 CORS,就实现了跨域(浏览器会自动进行 CORS 通信)。当然,如果需要兼容IE8、9这种老古董。我们需要通过 XDomainRequest 来实现。
对于服务端来说,只需要设置 Access-Control-Allow-Origin 就可以开启 CORS。具体的内容后端的小伙伴肯定很清楚。
这方式相对局限性比较的大,因为只能用于二级域名相同的情况下。
比如 a.mdove.COM 和 b.mdove.com 适用于该方式。
当然用法也比较的简单,只需要给页面添加 document.domain = ‘mdove.com' 即可。这样当我们的二级域名都相同,就可以实现跨域了。
这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息,另一个页面判断来源并接收消息。不扯犊子了,直接上代码:
// 发送消息端 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('验证通过') } });
以上是脚本宝典为你收集整理的四种跨域解决方案全部内容,希望文章能够帮你解决四种跨域解决方案所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。