form表单会跨域_iframe+form 实现跨域请求

一般解决跨越请求什么的，有很多方法，但前端一般都是基于ajax的，你可以通过设置参数或者jsonp什么的跨域，但是有的时候我们碰到很古老的跨域方式:iframe+form。说实在的，现在用这种方式已经不多了，因为这种方式比较繁琐，现在用ajax就已经可以很方便的解决问题了。

但是最近在看kindeditor富文本编辑器，因为我的图片服务器放在七牛，发现如果直接配置七牛的域名就出现跨域了。因此今天就讲讲如何通过iframe+form实现跨域的。基本思路

总体的流程大致如下:

上面的图可能比较复杂，不过别着急，慢慢来。首先我们可以模拟的是新建一个页面，然后放一个form和iframe，我们将form和iframe关联，当form执行submit的时候，让结果返回到iframe里，我们看看会发生什么:

我们可以看看当我们选择图片之后，点击提交，最后的结果到底什么情况：

当我们点击提交后，form表单提交到了up.qiniu.com，然后结果返回到了iframe里(通过form上设置target),iframe里面有了返回的结果，但是因为iframe是来自up.qiniu.com的内容，因此本地(localhost)是无法拿到里面的内容的，也就会报以下的错误：

要想可以拿到里面的内容，我们就需要up.quniu.com那边做一次跳转，跳转到我们这边到一个临时页面，同时将结果放在参数上，再由这个页面处理参数，把结果放在页面上：

上面的demo中，我们已经将iframe设置成display:none了，服务端那边会跳转到我们临时页面returnUrl.html上，同时把图片的结果放在参数上，我将在returnUrl.html上将参数直接放入body中，等待外层页面来取。外层取的主要代码如下：

$('#iframe').on('load',function(){

var iframe_document=this.contentDocument || this.contentWindow.document;

var url=JSON.parse($(iframe_document).text().trim()).url;

});

因此我们可以知道，如果要实现iframe+form跨域，那么客户端需要一个中转页面，服务端需要做一个重定向，因此还是比较复杂的。