使用jQuery上传跨域文件

Question

我的代码适用于同一个域.
但是当我在跨域使用 dataType:'jsonp'和crossDomain:true
代码示例时 -

var fa = new FormData();

fa.append("upload_pass", document.getElementById("upload_pass").files['0']);

$.ajax({    
    url: 'http://xxx.xx.xx.xx/upload.php',
    data: fa,
    contentType: false,
    processData: false,
    dataType: 'jsonp',
    crossDomain: true,
    type: 'GET',
    success: function(data) {
        alert(data);
    }
});

是否有任何概念性理解差距或编码问题.
请建议.

Answer 1

无法通过GET上传文件.即使您将使用JSONP.JSONP正在使用GET请求.并且您无法使用GET请求上传文件(通常使用POST请求上传文件).

如果您想将跨域POST请求发送到某个服务器,那么在下一种情况下您应该确定:

该服务器应该发送标题Access-Control-Allow-Origin : *.你也可能需要Access-Control-Allow-Methods: POST标题.

如果它有这些标题,那么你很幸运,你可以在这个服务器上发布你的数据.

PS您可以尝试使用其他方法来进行有效的跨域请求.用于跨域请求的Nice js library easyXDM,使用不同的方法来执行它.

Answer 2

JSONP和CORS完全是两回事.

JSONP

带填充的JSON只是一个黑客利用下载javascript文件时没有相同的源策略限制这一事实.由于您只能下载脚本,我们使用内置数据格式JSON而不是XML或HTML.此外,您只能使用JSONP进行GET请求,因为它所做的只是创建一个scriptwith srcset到其他域并将其附加到您的DOM,一旦下载,它就被执行,这时我们的回调用于从原始域调用代码传递JSON对象.

CORS

跨源资源共享是W3C的标准,允许从另一个域请求网页上的许多资源(例如字体,JavaScript等).您不仅可以使用GET,还可以使用所有常用的HTTP方法,如POST,HEAD,PUT,DELETE等

你怎么能提出一个CORS请求:

它就像将AJAX调用中的url更改为其他域一样简单,也就是说客户端没有其他更改.

如果您的浏览器支持CORS,那么根据请求类型(简单/复杂),可能会触发飞行前OPTIONS请求以获取有关此域允许的方法类型和内容类型的信息,此OPTIONS响应将被缓存.

展望未来,每当您对其他域进行AJAX调用时,浏览器都会在后台发送Origin请求标头.例如,如果来自谷歌的页面向Facebook发出AJAX调用,则会向请求标头添加类似这样的内容

Origin: http://google.com

当facebook看到此标题时,它将检查google.com是否在其允许的主机的有效列表中,并通过发送以下标头作为响应来同意.

Access-Control-Allow-Origin: http://google.com

请注意,Origin和Allow-Origin标头中的主机名应匹配,以便浏览器接受并根据收到的响应执行操作.您甚至可以通过设置响应中的以下标头来限制允许的方法和自定义标头

Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER

最后回答你的问题,改变你的Ajax定义,如下所示

$.ajax({    
    url: 'http://some-other-domain.com/upload.php',
    data: fa,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data) {
        alert(data);
    }
});

由于您只是使用文件进行简单的POST调用,因此它是一个简单的请求,因此Allow-Origin标头就足够了.在PHP中,读取Origin标题检查它是否在列表中,并在Allow-Origin响应标头中设置相同的标头值.我不知道PHP,但希望这样的东西:)

<?php
$headers = apache_request_headers();

  foreach ($headers as $header => $value) {
     if($header == "Origin"){
        /* check if $value is in your list
         if yes, set the response header */
         header('Access-Control-Allow-Origin: $value');
         /* adding just this header will allow any method from this 
            domain, in case you need to allow only POST method add
            Access-Control-Allow-Methods header as well */
         break;
      }
  }
  // do the remaining processing of request
?>

更多资源

• CORS的历史
• 关于CORS的5分钟视频
• 对复杂CORS请求的预先请求

希望这能回答你的问题:)