事起缘由:

二月份在做倩女coser报名专题的时候,被表单的POST跨域提交闹腾了一阵子。JSONP允许跨域但是不能使用POST请求也不能提交大文件;FormData的ajax提交能提交大文件,可惜会存在跨域报错;Form表单提交不存在跨域问题,但是却会刷新页面并跳转到数据接口页。显然这都不是我想要的。

对于POST请求跨域问题的处理,业界流行的解决办法有两种,一种是后台为当前页面专门设置CORS,另一种就是使用iframe的无刷新表单提交。

如果后台为页面专门设置CORS的话,就可以包治百病,不存在跨域报错问题,并且也不存在一级域名的限制,可以愉快地使用ajax提交。

然而遗憾的是,现实的很多业务情况中,后端并不会为页面专门配置CORS。所有的尴尬矛盾似乎都指向了唯一的解决办法:

使用隐藏iframe实现的无刷新表单提交

而万幸的是,我们的业务中,页面与接口的域名都是163.com下的。

实现原理:

把form表单提交到一个隐藏的iframe,这样页面就不会刷新。

若该iframe的地址与当前页面在同一父域名下,且document.domain为相同的父域名,即可实现同父域下的跨域请求。

数据接口返回的数据会存放到iframe的url中,通过解析url即可取回完整的数据。

所以,使用隐藏iframe可以解决同父域下的跨域请求,并且无刷新提交。

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/1483