跨域问题

285 阅读1分钟

开发过程中总能遇到跨域的问题,比如ajax请求跨域,cookie跨域等等。今天总结一下。

跨域是什么?

1.为什么会出现跨域问题?

出现跨域是因为浏览器同源策略。而同源策略呢,又是基于浏览器安全而必须存在的。不然数据无安全性可言。

知识点:同源是指域名,协议,端口相同。

要注意的是同源策略是浏览器行为,由浏览器进行检查限制。限制行为主要有

  1. Cookie,LocalStorage 和 IndexDB 无法读取。
  2. DOM 无法获得。
  3. AJAX 请求不能发送。

虽然这种限制是有必要的,但是在我们需要突破这种限制时的行为就叫跨域。

跨域解决方案

1.在同一个顶级域名下通过设置document.domain。使之归为同源。

2.页面内嵌Iframe想要跨域通信。

  1. 通过监听片段识别符达到通信的目的。也就是URL #号后边的部分
  2. 通过监听window.name达到通信的目的。浏览器窗口属性同窗口可以读取。
  3. HTML5的API window.postMessage方法
//窗口都是通过message事件监听消息
    otherWindow.postMessage(message, targetOrigin, [transfer]);
    window.addEventListener('message', function(e) {
        console.log(e.data);
    },false)

3. JSONP

4. WebSocket

5. CORS是跨源资源分享。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。服务器实现了CORS接口,就可以跨源通信。