Flask: 跨域上传的回调方案

为什么80%的码农都做不了架构师？>>>

随着互联网业务的规模不断扩大，网站的开发方式也产生发巨大的变化。就拿上传来说，早些年通常都是网站自身包含上传模块，通过跳转方式或iframe方式进行上传。这没有涉及到跨域，所以对于上传结果的通知是很容易做到的。然而现在越来越多的做法是将上传功能分离开来，形成独立的上传域来提供上传服务。本文主要是针对跨域上传的上传结果通知分析并提供解决方案。

跨域上传的方式

使用第三方存储，如七牛云存储
重定向上传方式
iframe上传方式

使用第三方存储

比如使用七牛云存储，这种方式第三方一般会提供各个语言的SDK，如果正巧您所使用的语言没有相应的SDK，那就只能自己去实现了。实现起来倒也不难，无非就是实现第三方授权的流程，然后通过文件上传协议提交文件到第三方。这种方式一般是通过服务器端来完成的，上传完成后第三方会有个上传反馈，然后返回到前端。

重定向上传方式

这是最传统的上传方式。各种上传方案都可以很容易的实现它。将上传表单重定向到上传网址，完成上传后可携带参数跳转回来。

iframe上传方式

这种方式是在页面中嵌入一个隐藏的iframe，上传表单提交到iframe来完成上传。现代浏览器都比较好的支持了iframe，所以这个方式也是通用的。这也是本文将讨论的上传方案。

iframe上传完成如何通知

同域或子域方式

如果是同域方式，因为iframe是嵌入在网页中，所以可以在iframe上传完成后通过parent来调用父框架提供的方法并将参数传入来实现通知，或者可以在上传完成后父框架获取iframe的引用并得到iframe的输出内容来实现通知。而如果是子域的方式，则还需要设置document.domain为子域。

跨域方式

因为是跨域方式，这将导致上传完成后目标iframe没有权限去调用父框架中的方法，并且父框架也没有权限去访问子框架的内容，所以无法进行通知上传结果。

是的，一般来说，在iframe上传完成后都会输出数据或一段js代码。但是如果输出的是一个iframe呢？本文将用2个host来演示这种情况。www.aw.com 是需要上传的网站，www.file.com 是提供上传的网站。我们来看个图：

上图很清晰的体现了这种包含关系。A上传到B，B上传完成后输出iframe，并指向A域名的一个页面，也就是上图中的C。A和C是同域的，即使是A不能访问C，但是C却可以通过parent.parent来访问A。为了演示，我配置了以下host：

aw目录结构如下：

www/aw

----app.py

----templates

--------index.html

--------cross.html

app.py源码：

#coding: utf8
import os
from datetime import timedelta
from flask import Flask, render_template
import urllibapp = Flask(__name__)app.secret_key = os.urandom(24)
app.permanent_session_lifetime = timedelta(seconds=24 * 60 * 60)@app.route('/')
def index():return render_template('index.html', **dict(upload_url='http://www.file.com:6667/upload'))@app.route('/cross.html')
def cross():return render_template('cross.html')if __name__ == '__main__':app.run(host="0.0.0.0",port=int("6666"),debug=True)

index.html源码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>aw</title><meta name="author" content="" /><meta http-equiv="X-UA-Compatible" content="IE=7" /><meta name="keywords" content="aw" /><meta name="description" content="aw" /><script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" action="{{ upload_url }}" method="POST" target="upload_iframe"><input name="UploadName" type="file" /><input type="submit" value="上传" />
</form>
<iframe id="upload_iframe" name="upload_iframe" width="0" height="0" style="display: none;"></iframe>
<script type="text/javascript">
// 上传完成回调
function uploadComplete(data)
{console.log('上传完成：' + data);
}
</script>
</body>
</html>

cross.html源码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>aw cross</title><meta name="author" content="" /><meta http-equiv="X-UA-Compatible" content="IE=7" /><meta name="keywords" content="aw cross" /><meta name="description" content="aw cross" /><script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {var href = location.href;var index = href.indexOf('?');if (index < 0){var data = 'result=upload_error';}else{var data = href.substring(index + 1);}// 将数据通过调用parent.parent.uploadComplete方法来传递parent.parent.uploadComplete(data);
});
</script>
</body>
</html>

file目录结构如下：

www/file

----app.py

app.py源码：

#coding: utf8
import os
from datetime import timedelta
from flask import Flask, request, render_template
import urllibapp = Flask(__name__)app.secret_key = os.urandom(24)
app.permanent_session_lifetime = timedelta(seconds=24 * 60 * 60)@app.route('/upload', methods=['POST'])
def index():'''忽略上传文件处理细节，直接返回数据'''cross_html = 'http://www.aw.com:6666/cross.html?result=upload_complete'return '<iframe width="0" height="0" style="display:none;" src="%s"></iframe>' % cross_htmlif __name__ == '__main__':app.run(host="0.0.0.0",port=int("6667"),debug=True)

这样就实现了跨域回调，知道了原理其实就不难了，如有需要可进行封装，如实现跨域检测，如果是同域则使用同域的方式进行回调，如果是跨域，则使用跨域的方式进行回调。并且可实现多文件上传方案。

关于超时

上传超时是必须处理的上传错误之一。对于iframe上传(这里并没有特指同域或跨域)来说，超时机制将会限制整个上传所占用的时间，这是有必要的，否则如果网络异常，前端将一直显示正在上传中，这是极不友好的用户体验。另一方面也是为了安全考虑。

其实实现iframe的上传超时机制非常简单。通过setTimeout在固定时间后去remove iframe，当然如果上传是成功的则会提前clearTimeout。所以如果setTimeout成功执行则肯定是超时了，否则就是上传完成(至于是上传成功或上传失败则由服务器端返回的状态码来确定)。比如：

index.html源码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>aw</title><meta name="author" content="" /><meta http-equiv="X-UA-Compatible" content="IE=7" /><meta name="keywords" content="aw" /><meta name="description" content="aw" /><script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" action="{{ upload_url }}" method="POST" target="upload_iframe"><input name="UploadName" type="file" /><input type="submit" value="上传" />
</form>
<iframe id="upload_iframe" name="upload_iframe" width="0" height="0" style="display: none;"></iframe>
<script type="text/javascript">
// 上传完成回调
function uploadComplete(data)
{timeout_id && clearTimeout(timeout_id);console.log('上传完成：' + data);
}
var timeout_id = setTimeout(function() {$("#upload_iframe").remove();uploadComplete("上传超时")
}, 10000);
</script>
</body>
</html>

大致上就是这样，这是很常用的跨域上传方案，有必要认真理解并加以实践。

转载于:https://my.oschina.net/goal/blog/200058