前言

作为人们日常PC端的浏览的入口，浏览器出于安全考虑，采用了同源策略。换句话说，如果协议/域名/端口有一个不同，那么就不符合此同源的前提。此时就需要跨域，否则Ajax请求（任何网络请求）会失败。

这里就简单介绍一些主流Web中的四种跨域的解决方案。

正文

1、JSONP

JSONP 的原理很简单，就是利用从上面的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); });

2、CORS这种方式，相比较Jsonp，CORS相对繁琐一些。因为需要浏览器和后端同时支持。实现CORS通信的关键是后端。只要后端实现了 CORS，就实现了跨域（浏览器会自动进行 CORS 通信）。当然，如果需要兼容IE8、9这种老古董。我们需要通过 XDomainRequest 来实现。对于服务端来说，只需要设置 Access-Control-Allow-Origin 就可以开启 CORS。具体的内容后端的小伙伴肯定很清楚。3、document.domain这方式相对局限性比较的大，因为只能用于二级域名相同的情况下。比如 a.mdove.com 和 b.mdove.com 适用于该方式。当然用法也比较的简单，只需要给页面添加 document.domain = ‘mdove.com\' 即可。这样当我们的二级域名都相同，就可以实现跨域了。4、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(\'验证通过\') }});

尾声

四种方式罗列完毕，不知道小伙伴们有没有收获？或者有更好更巧妙的方式，欢迎评论区一同交流。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/18480.html

Web前端开发必须要了解的四种跨域解决方案

前言

尾声

相关推荐

发表评论