layui.upload跨域上传无法回调解决方案

提问 未结 6 5904
vongele
vongele 2017-4-2
悬赏:5飞吻
公司上传图片的服务器跟程序的服务器不是同一个,用layui.upload的时候发现上传成功了,但是无法获得回调值,很头疼啊,但是又不想改用其他的上传插件,而且大部分都有这个问题,只好自己去看pload.js的源码,看看自己能不能改改,看到了这段(这是我改了之后的):
f = setInterval(function() {
var a;
// a='test'
try {
a = c.contents().find("body").text()
// console.log(a)
} catch(i) {
// t.msg("上传接口存在跨域", r),
a=false
// clearInterval(f)
}
if (a) {
clearInterval(f)
// c.contents().find("body").html("");
try {
a = JSON.parse(a)
} catch(i) {
return a = {},
t.msg("请对上传接口返回JSON字符", r)
}
"function" == typeof s.success && s.success(a, e)
}
},
30);
发现回调值a是通过读取iframe的body的text值来返回的,不能支持跨域也是理所应当的了,现在浏览器的安全机制越来越严格,所以js无法跨域读取iframe内容,但是同域名下就没问题了,那么我把返回值转到同域名下不就好了?,有了改造的方向,思路是后台输出返回值是时候,不直接输出返回值,而是输出:
<script>window.location.href="域名+uploadhelper.php?callback=callbackValue"</script>
//callbackVlue是转为json格式后的返回值字符串如{msg:'success',code:'1'}
//uploadhelper.php是在本域名下的一个文件,自己新建
这样当上传完成后iframe框就会跳转到uploadhelper.php,同时iframe也变成了同域名下了,就能愉快的获取iframe内的值了,uploadhelper.php只需这样:
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test1</title>
</head>

<body>
<?php echo $_GET['callback'];?>
</body>
</html>
好了,现在程序就能获取回调值了,完美解决!
回帖
本帖已设置禁止回复