浏览器同源策略，常见实现跨域方式 ？

什么是同源策略 ？

同源：协议，域名，端口号，三者相同 。

同源策略：是 浏览器本身的安全策略。浏览器不能执行其他网站的脚本，用于限制一个 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反向代理）：前端向本地服务器发送请求，本地服务器代替前端在向服务器接口发送请求进行服务器间通信，本地服务器是个中转站的角色，再将响应的数据返回给前端。

• 其他方式 ？

1. postMessage 和 onmessage。
2. node.js 中间件代理跨域。
3. WebSocket 协议跨域。
4. link，script，img，background:url()，@font-face() 等均不受跨域限制。