dropzone.js图像上传到不同的服务器(跨域)

时间:2013-12-20 09:23:18

标签: javascript jquery node.js cross-domain dropzone.js

这是我上传图片的代码,如果我将表单操作作为同一服务器

,它工作正常

如果我对不同的服务器采取行动

,则无法正常工作

html:

<div id="dropzone">
                                <form action="http://localhost:8080/stardom/api/v1/image" class="dropzone">
                                    <input type="hidden" name="album_id" value="" id="album_id" />
                                    <div class="fallback">
                                        <input name="file" type="file" multiple="" />
                                    </div>
                                </form>
                            </div>

js:

$(".dropzone").dropzone({
                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 2, // MB
                acceptedMimeTypes : 'image/*',
                addRemoveLinks : false,
                dictDefaultMessage :
                '<span class="bigger-150 bolder"><i class="icon-caret-right red"></i> Drop files</span> to upload \
                <span class="smaller-80 grey">(or click)</span> <br /> \
                <i class="upload-icon icon-cloud-upload blue icon-3x"></i>'
            ,
                dictResponseError: 'Error while uploading file!',

                //change the previewTemplate to use Bootstrap progress bars
                previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-success progress-striped active\"><span class=\"bar\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
                complete : function(){

                    if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                        loadImages();
                    }

                }
              });

问题:如何让dropzone.js将文件上传到不同的服务器?

2 个答案:

答案 0 :(得分:0)

如果你要做任何事情,ServerA服务于浏览器和浏览器的内容想要转向并向ServerB发送信息,而你通过javascript / ajax这样做,你将需要告诉接收ServerB它应该接受来自它不仅仅服务的服务器的数据帖子。通常这是使用 Access-Control-Allow-Origin“*” 在.htaccess文件中。

我对此有一些经验,但不是很多。我在内部平台应用程序中使用它,我们不需要担心XSS。希望有所帮助。对不起,这么晚了。

答案 1 :(得分:0)

我使用了这段代码并且有效。

//CORS middleware
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With, Cache-Control, Accept, Origin, X-Session-ID');
    res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,TRACE,COPY,LOCK,MKCOL,MOVE,PROPFIND,PROPPATCH,UNLOCK,REPORT,MKACTIVITY,CHECKOUT,MERGE,M-SEARCH,NOTIFY,SUBSCRIBE,UNSUBSCRIBE,PATCH');
    res.header('Access-Control-Allow-Credentials', 'false');
    res.header('Access-Control-Max-Age', '1000');

    next();
}
server.use(allowCrossDomain);