Question

我正在尝试在另一个域上发送文件，但progress event无效。如果我评论onprogress函数，则文件上传得很好，否则会发生错误：

OPTIONS http://another-domain.com No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mywebsite.com' is therefore not allowed access. XMLHttpRequest cannot load http://another-domain.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mywebsite.com' is therefore not allowed access.

以下是代码：

$("form").on("submit", function(e) {
    e.preventDefault();
    var file = $("#file")[0].files[0];

    var fd = new FormData();
    fd.append("Filedata", file);

    var xhr = getXDomainRequest();

    xhr.onprogress = function(e) {
        if (e.lengthComputable) {
            var percentComplete = (e.loaded / e.total) * 100;
            console.log(percentComplete + '% uploaded');
        }
    };

    xhr.onload = function() {
        if (this.status == 200) {
            var resp = JSON.parse(this.response);
            console.log('Server got:', resp);
        }
    };

    xhr.open('POST', 'http://another-domain.com', true);
    xhr.send(fd);
});

function getXDomainRequest() {
    var xdr = null;

    if (window.XDomainRequest)
        xdr = new XDomainRequest(); 
    else if (window.XMLHttpRequest)
        xdr = new XMLHttpRequest(); 
    else
        alert("Cross Domain not supported");
                    
    return xdr;        
}

我无法修改another-domain.com，因为它是一个API。

我尝试使用AJAX，File Upload，但我也无法使用progress事件。

有什么想法吗？

修改

以下是File Upload

的另一种解决方案

$('#fichier').fileupload({
    dataType: "jsonp", // API error
    beforeSend : function() {
        $("#upload_progression_pj").show();
    },
    progress: function (e, data) {
        var actuel = Math.round(data.loaded * 100 / data.total);
        log(actuel);
        $("#upload_progression_pj span").html( actuel + "%" );
    },
    done: function (e, data) {
        $("#upload_progression_pj").hide();
        $("#upload_progression_pj span").empty();
    }
});

Answer 1

如果您使用XHR2上传文件来源，并且you want to track upload progress，您的服务器将需要处理预检（OPTIONS）请求，浏览器将在发送基础上传POST请求之前发送这些请求。当然，除了此服务器必须具有的非预检CORS请求的支持之外，这也是如此。

XHR2的上传进度专门触发预检，即使上传POST请求没有其他任何内容要求预先设置跨源请求。我stumbled into this a while back myself。

如果您无法控制服务器并且它不处理OPTIONS /预检请求，您将无法使用上传进度事件。

Answer 2

跨域ajax只能使用JSONP来完成，因此这是您需要查看的方向。它有很多在线示例，我认为您在查找和实现它时不会遇到任何问题。

如何使用XMLHttpRequest在跨域上发送文件？

2 个答案: