跨域可以说是前端开发中很常见的一个问题了,虽然网上已经有很多类似的文章,不过本着记录自己的学习总结想法,还是要自己写一遍文章记录一下所学知识。
为什么会有跨域?
跨域的问题产生是因为浏览器的同源策略所导致的。同源策略的出发点是出于浏览器的安全所考虑的,如果每个人都可以随意访问其他站点的文件数据,将会产生非常严重的安全问题。
那怎么样才算是跨域呢?在浏览器里只要满足以下条件任一个就算跨域:
- 请求协议不同
例:http和https- 域名不同
例:xxx.com和mmm.com- 端口不同
例: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。