前端跨域的解决方案

跨域能够说是前端开发中很常见的一个问题了，虽然网上已经有不少相似的文章，不过本着记录本身的学习总结想法，仍是要本身写一遍文章记录一下所学知识。

为何会有跨域？

跨域的问题产生是由于浏览器的同源策略所致使的。同源策略的出发点是出于浏览器的安全所考虑的，若是每一个人均可以随意访问其余站点的文件数据，将会产生很是严重的安全问题。

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

1. 请求协议不一样
   例：http和https
2. 域名不一样
   例：xxx.com和mmm.com
3. 端口不一样
   例：xxx.com和xxx.com:81

跨域的几种解决方法

1. JSONP

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

2.CORS

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

3.iframe + location.hash

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

4. iframe + window.name

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

5. iframe + document.domain

若是两个页面的主域名相同，可是子域名不一样，能够修改document.domain为同一个域名，实现父子域名的跨域通讯，只限制主域名相同的状况下。（不算严格意义上的跨域）

6. postMessage

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

7.反向代理

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

8.WebSocket协议

WebScoket协议支持跨域通讯。

总结

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