什么是同源策略 ?
同源:协议,域名,端口号,三者相同 。
同源策略:是 浏览器本身的安全策略。浏览器不能执行其他网站的脚本,用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互,它能帮助阻隔恶意文件,减少可能被攻击的媒介。是一种约定,它是浏览器最核心,最基本的安全功能。
什么是跨域 ?
跨域:指的是非同源的资源之间尝试着进行交互通信,而由于受浏览器同源策略的限制,无法正常进行交互通信。
跨域出现的原因:浏览器同源策略限制,浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JS 实施的安全限制。无法跨域是浏览器对于用户安全的考虑。
【注】:同源策略限制行为,Cookie,LocalStorage,indexDB 无法读取,DOM 和 JS 对象无法获取,Ajax 请求发不出去。
常见解决跨域的方法?
- JSONP ?
JSONP:由于浏览器同源策略是允许,类似 script 由 src 属性的标签这样的跨域资源嵌套的,所以 script 标签的资源不受同源策略的限制。
- document.domin ?
document.domin:两个域名必须属于 同一基础域名,并且所有的 协议端口完全一致。
- iframe,hash ?
父页面向子页面传输数据:将要传递的数据添加到子页面的url的hash值上,子页面通过location.hash并添加定时器实时动态接受父页面传过来的数据。
子页面向父页面传输数据:利用 window.name 的特性,及页面重新加载但当前页的 name 值不变,即使换了一个页面。需要三个页面配合使用。一个应用页面,一个数据页面,一个代理文件。代理文件一般就是一个没有任何内容的 html 页面,需要和应用页面在同一域下。将数据页面的窗口换成代理页面,代理页面通过 window.name 获取数据页面留下的数据,应用页在访问和它同源的代理页面,获取数据,就完成了跨域。
- CORS ?
CORS:在服务器端设置的,不需要客户端进行操作。核心思想:使用 自定义的 http 请求头 让浏览器和服务器进行沟通,从而请求或响应是否应该成功 / 失败。如果服务器认为这个请求可以接受,就在 Accept-Control-Allow-Origin 头部中回发相同的源信息(如果是公共资源,可以回发 * ),如果没有这个头部,或者有这个头部但是信息源不匹配,浏览器会驳回请求。正常情况下,浏览器会处理请求。(请求和响应都不包含 cookie 信息)
- 服务器跨域 ?
服务器跨域,服务器中转代理(nginx反向代理):前端向本地服务器发送请求,本地服务器代替前端在向服务器接口发送请求进行服务器间通信,本地服务器是个中转站的角色,再将响应的数据返回给前端。
- 其他方式 ?
- postMessage 和 onmessage。
- node.js 中间件代理跨域。
- WebSocket 协议跨域。
- link,script,img,background:url(),@font-face() 等均不受跨域限制。