如何解决跨域

2 如何解决跨域

 

因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端⼝有⼀个不同就是跨域， Ajax 请求会失败。

 

我们可以通过以下⼏种常⽤⽅法解决跨域的问题JSONP

 

JSONP 的原理很简单，就是利⽤ <script> 标签没有跨域限制的漏洞。通过

<script> 标签指向⼀个需要访问的地址并提供⼀个回调函数来接收数据当需要通讯时

 

 

<script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script>
<script>
    function jsonp(data) {
      console.log(data)
    }
</script>

　　

JSONP 使⽤简单且兼容性不错，但是只限于 get 请求

 

在开发中可能会遇到多个 JSONP 请求的回调函数名是相同的，这时候就需要⾃⼰封装⼀个 JSONP ，以下是简单实现

 

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

 

ORS 需要浏览器和后端同时⽀持。 IE 8 和 9 需要通过 XDomainRequest 来实现。浏览器会⾃动进⾏ CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了

CORS ，就实现了跨域。

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS 。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有⽹站都可以访问资源。

document.domain

 

该⽅式只能⽤于⼆级域名相同的情况下，⽐如 a.test.com 和 b.test.com 适⽤于该⽅

。

 

只需要给⻚⾯添加 document.domain = 'test.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('验证通过')
    }
});

 

j