同源
概念:协议,域名,端口 相同。目的:保证用户信息的安全,防止恶意的网站窃取数据。限制的行为:
Cookie、LocalStorage 和 IndexDB 无法读取。
DOM 无法获得。
AJAX 请求不能发送。
跨域
资源跳转:A 链接、重定向、表单提交
资源嵌入:<link>、<script>、<img>、<frame> 等 dom 标签,还有样式中 background:url()、@font-face() 等文件外链
脚本请求:js 发起的 ajax 请求、dom 和 js 对象的跨域操作等
解决方案
场景:
两个网页一级域名相同,二级域名不同,需要共享 Cookie
iframe 窗口和 window.open 的窗口,需要与父窗口通信。
方案:
浏览器设置一级域名。document.domain = ‘example.com’;
服务器设置一级域名。Set-Cookie: key=value; domain=.example.com; path=/
场景:
完全不同源的网站,需要窗口通信
方案:
父子窗口(互相)写 location.hash,(互相)监听 hashchange
子窗口写 window.name 后跳回同域, 父窗口读 window.name
浏览器跨文档通信 window.postMessage
场景:
AJAX 请求非同源地址
方案:
架设服务器代理
JSONP
WebSocket
CORS
参考资料浏览器同源政策及其规避方法 – 阮一峰前端常见跨域解决方案(全)