同源策略
同源策略是浏览器的一个安全功能,同源即协议、域名、端口三者相同。它限制了从一个源加载的文档或脚本与另一个源进行数据交互,所以abc.com下的JS脚本请求xyz.com的数据会被拒绝。
注意:跨域限制访问,其实是浏览器的同源策略限制。
跨域
当协议、域名、端口任意一个不同时,都算不同域。不同域之间相互请求资源,就算跨域。
![58201d35175270accecb1610d67f9361.png](https://i-blog.csdnimg.cn/blog_migrate/76ff540bb0163f1bd743278962562572.jpeg)
注意:跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。
跨域的几种方法
(1)有三个标签允许跨域加载资源
(3)CORS
CORS(Cross-Origin Resource Sharing,跨域源资源共享),基本思想为使用自定义的HTTP头部让浏览器与服务器进行沟通,需要浏览器支持CORS。
客户端:发送HTTP请求时,额外添加一个Origin头部,包含请求页面的源信息,服务器根据此信息决定是否响应。
Origin:http://www.abc.com
服务端:在响应头添加Access-Control-Allow-Origin,回发相同源信息(公共资源可回“*”),若没有此头部,或头部源信息不匹配,浏览器会驳回请求。
Access-Control-Allow-Origin:http://www.abc.com
(4)WebSockets
Websocket是HTML5的一个持久化的协议,它实现了浏览器与服务器的全双工通信,同源策略对其不适用。
![13dcfe076836012c7768ddba36bc3451.png](https://i-blog.csdnimg.cn/blog_migrate/5dd3e8d996637cfd9ff851b161a471e2.jpeg)
WebSocket 在建立连接时要借助 HTTP 协议,建立连接后会从 HTTP交换为WebSocket 协议,WebSocket 的 server (服务端)与 client (客户端)都能主动向对方发送或接收数据。只有支持WebSocket协议的服务器才能正常工作。
(5)postMessage
如果两个网页不同源,就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口,它们与父窗口无法通信。HTML5为了解决这个问题,引入了一个全新的API:跨文档通信 API(Cross-document messaging)。这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。
![5fb8d932d3de84e537da36f14bc63b38.png](https://i-blog.csdnimg.cn/blog_migrate/e78468e037c66ce5c64e598940c4d7f1.jpeg)
postMessage方法的第一个参数是具体的信息内容,第二个参数是接收消息的窗口的源(origin)。也可以设为*,表示不限制域名,向所有窗口发送。
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取