跨域可以说是前端开发中很常见的一个问题了，虽然网上已经有很多类似的文章，不过本着记录自己的学习总结想法，还是要自己写一遍文章记录一下所学知识。

为什么会有跨域？

跨域的问题产生是因为浏览器的同源策略所导致的。同源策略的出发点是出于浏览器的安全所考虑的，如果每个人都可以随意访问其他站点的文件数据，将会产生非常严重的安全问题。

那怎么样才算是跨域呢？在浏览器里只要满足以下条件任一个就算跨域：

请求协议不同
例：http和https

域名不同
例：xxx.com和mmm.com

端口不同
例：xxx.com和xxx.com:81

跨域的几种解决方法

JSONP实现跨域的原理是动态创建script标签，src是具有跨域访问文件的能力，创建指定的地址和调用特定的回调方法获取数据，JSONP只支持get方法。

CORS（跨域资源共享）实现跨域的原理是在http请求头中加上指定的标记来告诉浏览器是否允许加载跨域的资源，也是现在主流的跨越解决方案。

iframe+location.hash实现跨域是使用iframe加载资源，然后在iframe中修改父窗口的location.hash，因为location.hash的信息会展示在url上，所以url的长度限制了我们传输信息内容的长度。

iframe+location.hash实现跨域是使用iframe加载资源，然后在iframe窗口加载的内容修改window.name的值，使用了window.name的特性，在当前窗口页所有加载的页面共享一个window.name，但是window.name的容量限制为不超过2m。

如果两个页面的主域名相同，但是子域名不同，可以修改document.domain为同一个域名，实现父子域名的跨域通信，只限制主域名相同的情况下。（不算严格意义上的跨域）

postMessage是html5标准的新特性，使用该api可以实现多种场景的跨域通信，但是在一些比较老旧的浏览器可能不支持此方法。

使用nginx或者nodejs中间件通过反向代理实现跨域访问。

WebScoket协议支持跨域通信。

综合以上几种的跨域解决方案来看，解决跨域大都是在服务器端，不管是从安全性还是实用性上来说。使用前端手段解决跨域的方案或多或少都有点缺陷，前端解决跨域的重点也是在围绕src的能力来展开，不管是iframe还是动态创建script。