Question

我正在使用JQuery将文件上传到服务器，它运行正常。由于一些用户将上传大文件，我想添加一个进度条，这就是事情变得时髦的地方。我已经找到了大约10种不同的解决方案（包括在这里），但它们都不适用于我的场景。

我发布的是另一个来源（这是我无法改变的事实）。这有效：

 $.ajax({
    url: "xxx",
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
        if(typeof data.error === 'undefined')
        {
            console.log('Success');
        }
        else
        {
            console.log('ERRORS: ' + data.error);
        }
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        console.log('ERRORS: ' + textStatus);
    }
});

但是只要我触摸XHR对象，比如这里添加一个onprogress监听器：

Can onprogress functionality be added to jQuery.ajax() by using xhrFields?

我的代码变成了：

 $.ajax({
    url: "xxx",
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    xhr: function()
    {
      var xhr = new window.XMLHttpRequest();
      xhr.upload.addEventListener("progress", function(evt){
        if (evt.lengthComputable) {
          var percentComplete = evt.loaded / evt.total;
          console.log(percentComplete);
        }
      }, false);
      return xhr;
    },
    success: function(data, textStatus, jqXHR)
    {
        if(typeof data.error === 'undefined')
        {
            console.log('Success');
        }
        else
        {
            console.log('ERRORS: ' + data.error);
        }
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        console.log('ERRORS: ' + textStatus);
    }
});

我在浏览器中收到以下错误：

阻止跨源请求：同源策略禁止在xxx读取远程资源。（原因：缺少CORS标题'Access-Control-Allow-Origin'。）

使用Firefox进行测试，但改变不是一个真正的选择，这需要适用于大多数流行的浏览器。

所以基本上，我可以发布跨源而且有效。一旦我想监视它的进展就失败了。

我尝试过的其他方式：

添加onprogress：到$ .ajax（）
使用XHRFields
xhr的各种不同形式：function（）

当我触摸XHR对象时，我被CORS拒绝了。万一你想知道，网络服务器（Apache）设置如下：

Header set Access-Control-Allow-Origin "*"

感谢任何输入，我已经在这几个小时了，并且无法获得血腥的进展。花费更多时间在实际应用程序本身上。

这是JQuery 1.7.1 - 我无法升级它。

如果修改xhr对象，有没有人知道为什么不允许使用不同的原点？

干杯

的Stefan

Answer 1

如果您在本地测试它，请尝试在网址中使用localhost而不是0.0.0.0，如果有效，请告诉我

如果修改XHR，JQuery AJAX请求会因CORS错误而失败

1 个答案: