ajaxUpload异步上传文件成功,前端获取数据却失败的解决方案

背景: 我们团队现在在做一个电商项目的时候，前后端分离的方式开发，有些页面要用到异步上传图片的技术来提高用户体验性。

我先来简要概述一下我们的技术方案：

后台框架： ssm

后台服务器: tomcat+nginx+apache

前端框架: jquery,vue,ajaxUpload,bootStrap

现在前端页面有一个上传头像的位置



前后端分离方式开发，我们的前端页面在前端服务器里，后台程序在后台程序服务器里，两个服务器不一样，所以ip不同。

这时前端的哥们使用ajaxUpload来上传图片到我们的后端服务器里,代码片段：



**前端的哥们上传之后图片上传成功了的，但是前端报了异常，我们很纳闷

响应成功后的数据:，我们确保是上传成功了的**



但是前端报错了:



Uncaught DOMException: Blocked a frame with origi
4000
n “null” from accessing a cross-origin frame.

这个错误导致了我们弄了好久，毕竟第一次用异步上传，网上查找了很多资料都没得到能解决的方案，报错依旧在。

直到我查看了ajaxUpload源码后才发现解决办法：

ajaxUpload源码> https://github.com/carlcarl/AjaxFileUpload/blob/master/ajaxfileupload.js

告诉我们异步上传的实现是通过在当前页面动态创建一个iframe,iframe里再根据我们提交的信息再创建一个Fom表单，如图所示:



造成错误的原因是因为iframe同源策略的问题，因为前端页面在前端服务器里，它的ip假设为 pageIp,刚开始动态创建的iframe的domain跟父页面的是一致的，但是我们表单提交的地址是后台程序所在的地方，ip为webIp,当iframe里的Form提交后，页面变成了

http://webIp/xxxx了,不再是http://pageIp了(当然，这一步我们是看不到的，ajaxUpload封装了)，当请求成功后,ajaxUpload要处理success回调方法来获取ifram的最终数据，也就是上面第3张图的json数据.

ajaxUpload.js获取iframe里的json数据的源码片段:



因为domain不同了,所以ajaxUpload获取不到后台返回来的json数据,所以抛出异常:

Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame.

解决办法:

因为前端有PHP环境,所以我叫前端的哥们写个PHP,名字为imageCallBack.php来接收参数值，然后再转成json来echo(不再由我们java后台来直接返回json数据了)。这样保证了ip一致,默认domain一致（当然这个PHP可以用jsp啥的代替的,要跟前端页面同个服务器，当然，解决办法不止这一个，还会有其他的。所以希望有更好的解决办法可以贴出来）。

后台哥们则在java的controller层方法处理完后，将参数(resultCode,resultDesc,savePath,correct参数)携带好，然后重定向到http://pageIp/frontPage/common/imageCallBack.php.(http://pageIp/frontPage是前端网站所在位置),所以前端上传了文件后，json数据在该地址处输出.

OK,问题解决完毕.这个棘手问题算是解决了