Jquery-upload-progress 跨域问题。疑似GET请求问题答案

【问题标题】：Jquery-upload-progress cross domain issue. Suspected GET request problemJquery-upload-progress 跨域问题。疑似GET请求问题
【发布时间】：2009-12-12 02:22:32
【问题描述】：

我正在做一个将表单提交到不同服务器的站点。对于上传进度跟踪，我使用：服务器端 NginxHttpUploadProgressModule 和客户端 - jquery-upload-progress。我已经通过将表单提交到同一台服务器来测试设置，并且一切正常。提交到另一台服务器不会显示进度跟踪（跨域脚本）。经过几个小时的调查，我得出的结论是 JQuery 生成的 GET 请求有问题。

查询如下所示：

http://domain.com/upload/progress/?X-Progress-ID=39b2825934dbb2f33fe936df734ff840&callback=jsonp1249230337707&_=1249230345572

来自 NginxHttpUploadProgressModule 站点：

对该位置的 HTTP 请求必须具有 X-Progress-ID 参数或 X-Progress-ID HTTP 标头，其中包含您在相关跟踪区域的上传/POST 请求中指定的唯一标识符。如果您使用 X-Progress-ID 作为查询字符串参数，请确保它是 URL 中的 LAST 参数。

那么，我的问题是如何将 X-Progress-ID 参数附加到 jquery GET 请求的末尾或设置 X-Progress-ID 标头？

这不适用于 jsonp（来自 jquery.uploadProgress.js 的代码）：

beforeSend: function(xhr) {
   xhr.setRequestHeader("X-Progress-ID", options.uuid);
}

目前请求是这样生成的（代码来自 jquery.uploadProgress.js）：

jQuery.uploadProgress = function(e, options) {
 jQuery.ajax({
 type: "GET",
 url: options.progressUrl + "?X-Progress-ID=" + options.uuid,
 dataType: options.dataType,
 success: function(upload) {
 ...

【问题讨论】：

标签： upload jquery nginx progress-bar jsonp

【解决方案1】：

我解决了 GET 参数问题（代码来自 jquery.uploadProgress.js）：

jQuery.uploadProgress = function(e, options) {
  jQuery.ajax({
  type: "GET",
  url: options.progressUrl,
  dataType: options.dataType,
  data: "X-Progress-ID=" + options.uuid,
  success: function(upload) {
  ...

修改后的 GET 请求如下所示：

http://domain.com/upload/progress/?callback=jsonp1249230337707&_=1249230345572&X-Progress-ID=39b2825934dbb2f33fe936df734ff840

nginx 网络服务器现在可以正确响应。

然而，正如 Ron Evans 指出的那样，除非修改 NginxHttpUploadProgressModule，否则客户端进度跟踪部分将无法工作。

【讨论】：

【解决方案2】：

您根本无法从网页向与页面域不同的域触发 XmlHttpRequest。它违反了所有浏览器默认的安全定义。我能想到的唯一你可以做的是使用 Flash 或 Silverlight 来启动进度调用（Flash 和 Silverlight 可以，给定正确的 crossdomain.xml 设置，从浏览器发送异步请求预设域列表）或者，设置一个浏览器插件（比如 Firefox 插件，或 IE ActiveX，或嵌入式 WinForm 控件），可以在没有同域限制的情况下发起调用（因为请求不会来自网页，而是来自浏览器本身）

【讨论】：

这不是jsonp的问题。我的问题是如何将 X-Progress-ID 参数附加到 Get 请求。

【解决方案3】：

上传状态也需要安装Apache模块，只使用jQuery插件是不行的。

为了回应 Ken，我建议您熟悉 JSONP 规范，因为 JSONP 是专门为处理跨域 Javascript 调用而创建的。

无论如何，这段代码在Passenger/Apache 和我修改后的Apache 模块中运行良好。如果不修改 Nginx 的扩展，它将无法与 JSONP 调用一起使用。

【讨论】：

【解决方案4】：

我做了一个小修改，为我解决了这个问题，你可以在这里查看：

http://github.com/tizoc/nginx-upload-progress-module/commit/a40b89f63b5a767faec3c78d826443a94dc5b126

【讨论】：