### **什么是跨域？**
浏览器出于安全（如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击）层面的考虑不允许一个域的javascript脚本和另外一个域的内容进行交互。所谓同源即指在同一个域，就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。当一个请求url的**协议、域名、端口**三者之间任意一个与当前页面url不同即为跨域。
| 当前请求域名 | 被请求域名 | 是否跨域 | 原因 |
| :-: | :-: | :-: | :-: |
| http://www.a.com | https://www.a.com | 是 | 协议不同 |
| http://www.a.com | http://www.b.com | 是 | 主域名不同 |
| http://x.a.com| http://y.a.com | 是 | 子域名不同 |
| http://www.a.com:80/ | http://www.a.com:81/ | 是 | 端口不同 |
### **非同源限制**
1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB;
2. 无法接触非同源网页的 DOM、js对象;
3. 无法向非同源地址发送 AJAX 请求;
### **跨域解决方案**
解决跨域的本质是‘绕过’浏览器的同源限制，实现不同源地址的数据交互。
| 方案 | 描述 | 场景应用 |
| :-: | :-: | :-: |
| JSONP | 通过\<script>标签的src属性发送带有callback的Get请求 | 只能发送 **Get** 请求，适合加载不同域名的js、css，img等静态资源 |
| CORS | CORS全称"跨域资源共享"（Cross-origin resource sharing）,它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。浏览器将CORS跨域请求分为简单请求和非简单请求。 | CORS需要浏览器和服务器 **同时支持** 。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。在浏览器支持的情况下，服务端通过设置请求的相关响应头来支持跨域，**适合做ajax各种跨域请求** |
| 代理跨域 | 通过服务器代理转发的方式绕过浏览器的同源策略，比如 **nginx** 代理跨域或者 **node中间件** 代理跨域。 | 适合前后端分离的前端项目调后端接口 |
| document.domain + iframe | 实现原理： 两个页面都通过js强制设置document.domain为基础主域，就实现了同域。 | **仅限**主域相同，子域不同的跨域应用场景 |
| location.hash + iframe | 实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。| |
| window.name + iframe | window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。| |
| postMessage跨域 | 它可用于解决以下方面的问题:页面和其打开的新窗口的数据传递; 多窗口之间的消息传递；页面与嵌套的iframe的数据传递；以上三种场景的数据跨域传递 | HTML5新特性，兼容性不好，只适用于主流浏览器和IE10+ |
| WebSocket协议跨域 | | HTML5新特性，兼容性不好，只适用于主流浏览器和IE10+ |
详情见 **[九种常见的前端跨域解决方案 - 小铭子 - 慕课网](https://www.imooc.com/article/291931)**
