跨域请求的 Xhr 上传支持答案

【问题标题】：Xhr upload support on Cross Domain requests跨域请求的 Xhr 上传支持
【发布时间】：2013-08-29 11:38:29
【问题描述】：

我有一个代理可以将火上传到 Amazon S3 服务器。这个代理是使用 NodeJS 制作的，我的网页托管在 Tomcat 服务器上。因此，要进行 Xhr 上传，我必须使用 Nginx 来解决跨域问题，因为两台服务器都在同一台机器上。

但是使用 Nginx 有很多问题，所以我的老板问我是否可以使用跨域策略来做同样的事情。我做到了，但这是我无法做到的一些事情。这是我的代码：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(e) {};
xhr.open('POST', self.basePath + '/upload' + file.name, true, null, null, null, true,       true);
xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
xhr.setRequestHeader("Connection", "close");
xhr.sendAsBinary(file.getAsBinary());

这适用于使用文件到达服务器并返回响应的跨域请求，但是当我尝试设置如下的进度事件时：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(e) {};
xhr.upload.onprogress = function(){console.info('on progress');};
xhr.open('POST', self.basePath + '/upload' + file.name, true, null, null, null, true,       true);
xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
xhr.setRequestHeader("Connection", "close");
xhr.sendAsBinary(file.getAsBinary());

不会触发跨域请求（请求使用“OPTIONS”方法而不是 POST，并且它永远不会到达服务器）。但是，正如您可能认为的那样，我需要将进度事件显示给用户。有谁知道发生了什么？？

Ps：上面的所有代码都可以完美地处理“同域”请求。 Ps2：我试过 xhr.onprogress 但它从未被触发（在跨域或同域请求上） Ps3：我在 FF4+ 和 Chrome 12+ 上试过了

非常感谢。蒂亚戈

【问题讨论】：

标签： upload cross-domain xmlhttprequest

【解决方案1】：

我之前也遇到过类似的问题。

解决方案：添加

<AllowedHeader>*</AllowedHeader>

在 s3 上的 CORS 配置中

【讨论】：

【解决方案2】：

xhr.upload.addEventListener("progress", yourUpdateProgressFunction, false);

【讨论】：