vue跨域获取iframe当前的url_史上最全前端开发跨域解决方案整理！必须收藏！

后台回复【福利】限时9.9 领取JS零基础入门课程

在我们做项目开发的时候，前端做数据交互，尤其是做数据获取的时候，经常都会遇到跨域的问题，那到底什么是跨域问题呢？

今天李老师就来带大家一起来学习一下，理解一下什么是跨域，常见的跨域问题都有哪些，如何解决跨域问题。

跨域是什么鬼？

官方的介绍是：跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。这里指的跨域就是比较广义的了。

广义的跨域，一般是指：

1.资源跳转：A链接、重定向、表单提交 

2.资源嵌入：、、、等dom标签，还有样式中background:url()、@font-face()等文件外链 

3.脚本请求：js发起的ajax请求、dom和js对象的跨域操作等

不过我们经常遇到的跨域都是指狭义的，也就是由浏览器同源策略限制的一类请求场景应用情况。

这时候就有小白来问了，什么是同源策略啊？

什么是同源策略

同源策略/SOP(Same origin policy)是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1.IndexDB、LocalStorage 和  Cookie无法读取

2.  Js对象 和DOM无法获得

3. AJAX 请求不能发送

我们可以根据同源策略的定义，总结出常见的6种跨域场景：

遇到上述这些情况，根据我们应用的技术，我们可以总结出来9种跨域解决方案：

1、 通过jsonp跨域

2、 document.domain + iframe跨域

3、 location.hash + iframe

4、 window.name + iframe跨域

5、 postMessage跨域

6、 跨域资源共享(CORS)

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域

这些解决方案都是需要基于有一定JavaScript基础，或者框架技术基础才能完成的，如果你是零基础小白，下面的内容可能会让你钻牛角尖，可以先收藏，到后面项目遇到了再看都可以的。

今天的这九种解决方案的讲解，分两篇推文讲解，先介绍前面3种，后面一篇再介绍后面6种，大家可以根据自己的情况，来分开查阅。

那么接下来我们就来讲解一下这些解决方案的具体方法：

一、 通过jsonp跨域

在我们日常的项目开发中，一般为了减轻web服务器的负担，我们会把css、img、Js等静态资源放到另一台独立域名的服务器上，在html页面中再通过对应的标签下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态去创建script，再请求一个带参网址实现跨域通信。

1.原生实现：

服务端返回如下(返回时即执行全局函数)：

2.jquery ajax：

3.vue.js

后端node.js代码:

jsonp缺点：只能实现get一种请求。

二、 document.domain + iframe跨域

这个解决方案只适用于主域相同，子域不同的跨域应用场景。其他情况不能使用

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

1.)父窗口：(http://www.demo.com/a.html)

2.)子窗口：(http://child.demo.com/b.html)

三、 location.hash + iframe跨域

实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

1.)a.html：(http://www.demo.com/a.html)

2.)b.html：(http://www.demo2.com/b.html)

3.)c.html：(http://www.demo.com/c.html)