跨域文件上传解决方案 - CSDN博客
跨域文件上传解决方案
最近工作中有这样的需求：项目在A机器（假设域名为）上跑，资源文件要存储在专门的资源机器B（假设域名为），要求在A上传文件到B上同时将上传信息以json格式返回。
由于之前的项目都比较小，也没有这样的需求，基本都是在单机上操作，自然涉及不到跨域的问题，初次遇到这个问题，比较棘手，进行了如下尝试均失败。
尝试一：在A机器上的页面中嵌入一个iframe，iframe的src指向B机器的一个上传页面，这样可以很容易将资源上传到B机器，但是却很难实现“以json格式返回上传信息”{/*当然这里可以想将返回的数据写到B机器的上传页面，然后在提交A页面的表单时，利用js从B机器上获取返回数据，但是这样太过繁琐，且耦合度极大，基本可以放弃*/}。
尝试二：利用SWF上传插件，借助AS脚本上传，比较著名的插件如：JQuery Uploadify支持此功能，这种方法利用了Flash沙箱原理，理论上可以完成跨域上传，但是前提是需要对服务器有绝对的控制权，因为这种方法需要域名的根目录下存在一个跨域访问的策略文件crossdomain.xml，客观条件限制，次尝试亦失败。
以上两次尝试都已失败告终，无奈只好在CSDN上求助，CSDN果然强悍，感谢moocky网友提供思路：
上传文件到A网站，然后通过PHP的ftp函数、或HTTP模拟上传到B，这样的话返回的json一直是在A网站上的；另外也可以参考一下腾讯的，如果两个网站都是你的，比如你a网站的域名为，在B网站同时绑定一个域名upload.，就可以直接上传到B网站并返回json数据了
本文已收录于以下专栏：
相关文章推荐
异步上传文件并获得返回值（完全跨域）AJAX可以进行数据的异步请求，但对于文件和跨域问题却束手无策。
Jsonp可以进行跨域数据的异步请求，但同样不能使用于文件。
表单可以进行跨域数据和文件的上传...
JSONP请求有限制: 第一,不能跳出两层, 第二,不支持POST. 
往往解决跨域POST请求的方案是个&古老&方法, 请求同域下的iframe.
服务器端: 
需要附加头信息:
header('A...
方案一 传到前端服务器本地,然后用服务器跨域
ajaxSubmit方式,需要jquery.form.min.js插件
$(&#imgUploadForm&).ajaxSubmit({
           
               
            &#...
在网上找了很多上传图片的帖子，大部分是多上传的，还有说的不清楚的，根本看不懂，好吧，然后自己整了一个凑合能用的，看的过去的给你们。下载地址
因为要将所有上传的图片上传到一台独立的图片服务器上面，js上传时存在跨域问题，网上找到这种，通过php curl方式，将图片重新发送到另外一台服务器上保存，并返回图片路径！
这种方式存在一定...
最近在弄一个上传功能，上级要求使用异步；找了一下工具，好几种，html5uploader、plupload、webupload等，这边选用了第一张，因为找到了一个带进度条的例子，直接拿来用，测试了几次...
最近项目里需要处理跨域请求，遇到了一些问题，中间走了很多坑，深挖了很多细节，受益良多。
cors在跨域解决方案中算是很好用的，网上资料一大堆，只需要在服务器端进行配置即可。
配置方法网上也很多，我简单...
var xhr = new XMLHttpRequest();
* handle c...
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)kindeditor4跨域上传图片解决
时间： 21:26:14
&&&& 阅读：536
&&&& 评论：
&&&& 收藏：0
项目中正在使用kindeditor, 版本号4.1.10
非常多公司的图片会走CDN，须要单独的一台图片上传服务如：（）
kindeditor上传图片的简单内部流程：
上传button是提交到iframe。生成1个form和1个iframe,form提交到(arget)iframe
iframe的onload方法获取返回的值。然后调用配置回调方法afterUpload/afterError。
详细实现:（在a.com选中图片，上传用，返回上传的结果给a.com。我的项目springmvc）：
跨域中使用须要改动2个地方：1.上传后的返回方式，2回调的页面处理。
1.的上传方法：
@RequestMapping(value = &/upload&, method = RequestMethod.POST)
public String upload(HttpServletRequest request, HttpServletResponse response) {
String referer = request.getHeader(&referer&);
Pattern p = pile(&([a-z]*:(//[^/?#]+)?)?&, Pattern.CASE_INSENSITIVE);
Matcher mathcer = p.matcher(referer);
if (mathcer.find()) {
String callBackPath = mathcer.group();// 请求来源a.com
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)
MultipartFile imgFile = multipartRequest.getFile(&fileupload&);//k4中fileupload
//JsonObject json =自己的处理imgFile
// 同域时直接返回json.toString()就可以无需redirect
String url = &redirect:& + callBackPath + &/kindeditor/plugins/image/redirect.html?s=& + json.toString() + &#& + json.toString();
(String.format(&upload success url:%s&, url));
(&upload referer not find&);
} catch (Exception e) {
logger.error(&upload error&, e);
上传自己实现。重点是返回，我的打印结果：
upload success url:http://a.com/kindeditor/plugins/image/redirect.html?s={&error&:0,&url&:&/upload/sns/temp/9370.jpg&}#{&error&:0,&url&:&/upload/sns/temp/9370.jpg&}
redirect有參数s和#号是反复的，非常low,在a.com中用到。期望改动掉。
中编辑器的初始化：
var uploadbutton = KindEditor.uploadbutton({
button : KindEditor(&fileupload&)[0],
fieldName : &fileupload&,
url : &/upload&,
afterUpload : function(data) {
if (data.error == 0) {
//data.url 处理
alert(&error&);
afterError : function(str) {
//alert(‘error: ‘ + str);
uploadbutton.fileBox.change(function(e) {
uploadbutton.submit();
button：fileupload。没有特殊的地方。
中kindeditor\plugins\image\redirect.html内容：
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&ie shit shit&/title&
&script type=&text/javascript&&
//获取url參数
function getParameter(val) {
var uri = window.location.
var re = new RegExp(&& + val + &=([^&?]*)&, &ig&);
return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
var upload_callback = function(){
var data=getParameter(&s&);
var location_hash=location.
//ie6取不到hash???用那个方式取？暂使用url传參数s
if(location_hash!=null && location_hash!=&& && location_hash){
var data = location.hash ? location.hash.substring(1) : ‘‘;
document.getElementsByTagName(&body&)[0].innerHTML = ‘&pre&‘ + data
+ ‘&/pre&‘;
var data=getParameter(&s&);
document.getElementsByTagName(&body&)[0].innerHTML = ‘&pre&‘ + data
+ ‘&/pre&‘;
&body onload=&upload_callback();&&
当中參数s和#号自己处理下能够仅仅用1个。
以上IE6、7、8、9、10、火狐、chrome測试通过。苹果浏览器safari測试未通过。
===========================================================
safari下原因：请求redirect.html后iframe的onload调用处理时转为json时出错：
如：http://a.com/kindeditor/plugins/image/redirect.html?s=%7B%22error%22:0,%22url%22:%22/upload/demo_web/temp/9649.jpg%22%7D#%7B%22error%22:0,%22url%22:%22/upload/demo_web/temp/9649.jpg%22%7D
处理后结果：%7B%22error%22:0,%22url%22:%22/upload/demo_web/temp/9649.jpg%22%7D
转为json时出错。应该格式为:{&error&:0,&url&:&/upload/demo_web/temp/9649.jpg&}
例如以下图的str转json：K.json(str).（kindeditor-all.js 行）
应该是请求有问题，暂时解决，改动kindeditor-all.js（错误时再尝试下转码）
自己的处理，低级的地方多指正学习。
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！&&&&&&&&&&&
关于这个跨域上传图片的问题，其实去年底的时候就该去实现的，因为老板朝三暮四，一会儿让做这个，一会儿看那个，就耽误了。因为这个过程花费了我整整一天的时间，我认为有必要记录下来。
首先，项目是一个ERP，针对的是公司的一个小型电商的网站。项目经理让我搭建一个图片服务器，&当时也是为了完（尝）成（尝）任（新）务（鲜），用的都是当时从没接触过的。通过百度就选择了&Nginx + Nodejs +&express +&ImageMagick&来实现的。 当时还简单看了一下淘宝的TFS（Taobao FileSystem）太高大上了，因为预估网站图片不会非常多，就用系统自带的文件系统。 &Nodejs也是边学边写，可是调试express &这种MVC的时候，就不管用了。。。试了很久也不行。。。 & 就采用边看api 边打印出来调试。总算可以上传，下载浏览图片了。
后来移至到项目中才发现，跨域是个很大的问题。图片服务器，提供一个接口。当时想了两套解决方案：
先上传到项目中，然后再编写一个windows服务，来定时把上传的图片传到图片服务器中；
在图片服务器上写一个页面，然后通过iframe嵌套在项目中。
第二个解决方案直接被项目经理否决了，我也觉得写那么多东西不太好，也不想写这么多东西，只想一步到位。然后就花了一天的时间，查资料，实验。 当时可选的上传的控件有三个，原先项目里面的ajaxSubmit，领导推荐的plupload，我自己查到百度的webupload。 最后我当然选择使用我自己查到的了。 根据官方给出的api，demo来尝试写。 &看到demo里面写的是server地址是以http开头的，不是项目中的相对路径。就以为是天然可以跨域，后来找到github上面issues里面，提到这个没有采用jquery file upload 的form post的形式，但是不采用这个可以实现文件修改的，也就实现上传前压缩，和分块上传这些功能的。
然后为了跨域我做了这些尝试：
修改nginx的代理，失败。
修改nodejs的express里app.js，在response的消息头部加上下面这段代码， 失败。
后来我想，只需要在条用上传的方法的头部加上，后来使用chrome插件postman，模拟调用，发现POST可以接受到，POST跨域成功。
后来发现WebUpload，会先发送一个OPTIONS的请求，百度了一下才发现，HTTP协议不止POST和GET。。
浏览器在跨域请求前会发个options请求来验证是否跨域，所以后端再处理这个options请求时，要告诉浏览器一些信息。其实就是个header信息。
HTTP请求方法并不是只有GET和POST，只是最常用的。据RFC2616标准（现行的HTTP/1.1）得知，通常有以下8种方法：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE和CONNECT。
OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。通过这个方法，客户端可以在采取具体资源请求之前，决定对该资源采取何种必要措施，或者了解服务器的性能。
OPTIONS请求方法的主要用途有两个：
1、获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。
2、用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。
发现Webupload发送的OPTIONS请求，虽然阻止，但是，返回的状态码是200，也就是说Nginx是配置正确的，赶紧将Nginx配置改回来。
后来灵光一闪，想起Express的路由好像会控制，接收什么协议的访问。然后赶紧尝试看看，成功了很是兴奋。
var router=express.Router();
var file_ctrl = require('../controller/filectrl')
/**上传文件*/
router.options('/upload',file_ctrl.upload);
router.post('/upload',file_ctrl.upload);
&最后再放两张图，成功和失败 返回的Response Headers信息，确实不同。 基于这个，那不是所有的跨域问题都可以解决了，像网上说的Jsonp，iframe 完全都可以不用了。嘿嘿
阅读(...) 评论()后使用快捷导航没有帐号？
只需一步，快速开始
查看: 5472|回复: 4
jquery uploadify插件解决跨域上传图片问题时，出问题
UID436175在线时间 小时积分702帖子离线17473 天注册时间
高级会员, 积分 702, 距离下一级还需 298 积分
& && && && &$('#fileId').uploadify({
& && && && && & 'uploader': 'uploadify.swf',
& && && && && & 'script': 'http://192.168.0.170:8080/fileUpload.action',
& & & & & & & & & & & & & & & & //'script': '/fileIndex.jsp',
& && && && && & 'cancelImg': 'cancel.png',
& & & & & & & & & & & & & & & & 'method' : &POST&,
& & & & & & & & & & & & & & & & 'scriptAccess' : 'always',
& & & & & & & & & & & & & & & & 'folder' : '/files',
& & & & & & & & & & & & & & & & 'onAllComplete'&&:function(event,data)
& & & & & & & & & & & & & & & & {
& & & & & & & & & & & & & & & & & & & & $('#result').html(data.filesUploaded +'个图片上传成功');
& & & & & & & & & & & & & & & & },
& & & & & & & & & & & & & & & & 'onError': function(event, queueID, fileObj) {
　alert(&文件:& + fileObj.name + &上传失败&);
　}
& && && && &});复制代码
代码如上，
响应服务器上的&&crossdomain的设置如下&?xml version=&1.0&?&
&!DOCTYPE cross-domain-policy SYSTEM
&/xml/dtds/cross-domain-policy.dtd&&
&cross-domain-policy&
& && &&&&site-control permitted-cross-domain-policies=&master-only&/&
& & & & &allow-access-from domain=&*& secure=&true& /&
&/cross-domain-policy&
不跨域测试没问题，XML能获取到，跨域的话，就会出现HTTP Error，咋回事？？？
UID512181在线时间 小时积分1667帖子离线17473 天注册时间
银牌会员, 积分 1667, 距离下一级还需 1333 积分
服务器端需要设置吧
UID436175在线时间 小时积分702帖子离线17473 天注册时间
高级会员, 积分 702, 距离下一级还需 298 积分
UID436175在线时间 小时积分702帖子离线17473 天注册时间
高级会员, 积分 702, 距离下一级还需 298 积分
大爷的，果然是服务器问题，我用PHP实现没问题，那个JAVA程序员真....
UID606024在线时间 小时积分10帖子离线17473 天注册时间
新手上路, 积分 10, 距离下一级还需 40 积分
楼上你怎么解决的呀
Powered byueditor跨域上传图片问题_程序员吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：104,750贴子：
ueditor跨域上传图片问题收藏
各位大神我用的是最新版1.6的jsp版本，现在要把图片上传的指定的服务器上我该怎么弄呀，网上说的document.domain = ‘根域’;这种没成功呀，求大神帮帮忙。
程序员?来上市公司博为峰学软件技术,零基础授课,零元入学,就业有保障!程序员?学软件技术要学多久?学软件技术毕业起薪8K,入学即签就业协议!
没有会的大神吗？
跨域怎么解决
这 问题百度根本就搜不到
登录百度帐号推荐应用