跨域问题总结

出现跨域问题原因: 同源策略

 

什么是同源策略?

    1. 协议相同 (http & https)

    2. 域名相同 (http://www.a.com & http://www.b.com)

    3. 端口相同 (http://www.a.com & http://www.a.com:8080)

同源策略的限制范围:

    1. cookie、localStorage、indexDb无法读取

    2. DOM无法获取

    3. AJAX请求不能发送

 

出现跨域后的解决方案?

 

    1. 获取cookie:设置document.domain共享cookie

    2. 获取DOM:(父子页面通信)window.opener.postMessage(message, targetOrigin, [transfer])

    3. AJAX:

        Ⅰ. JSONP:基本思想是网页通过添加一个<script>元素,向服务器请求json数据,这种做法不受同源政策的限制,服务器收到请求后,将数据放在一个指定名字的回调函数里面传回来。(只能发GET请求)

        Ⅱ. WebSocket:WebSocket是一种通信协议。使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信

        Ⅲ . CORS(corss-origin resource sharing 跨域资源共享):CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能,IE浏览器不能低于IE10;只要服务器实现了CORS接口,就可以跨源通信

            1. 简单网络请求:对于简单请求,浏览器直接发出CORS请求。具体来说,就是在Header中增加一个Origin字段

            如果浏览器发现跨源AJAX请求是简单请求,就自动在头信息之中,添加一个Origin字段

            2. 非简单请求:非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json

            非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错

            3. 与JSONP对比:CORS与JSONP的使用目的相同,但是比JSONP更强大。JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式的浏览器,以及可以向不支持CORS的网站请求数据

            详解如下图:

(ps: 如果对您有帮助,请点个赞,谢谢 😄)

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页