Question

我的代码适用于同一个域。
但是当我在跨域使用 dataType：＆＃39; jsonp＆＃39; ＆amp; 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标题。

如果它有这些标题，那么您很幸运，您可以在此服务器上发布数据。

P.S。您可以尝试使用其他方法来进行有效的跨域请求。好的js library easyXDM用于跨域请求，使用不同的方法来执行此操作。

Answer 2

JSONP和CORS完全是两回事。

JSONP

带填充的JSON只是一个黑客利用下载javascript文件时没有相同的原始策略限制这一事实。由于您只能下载脚本，我们使用内置数据格式JSON而不是XML或HTML。此外，您只能使用JSONP发出GET请求，因为它所做的就是创建script并将src设置为某个其他域并将其附加到您的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
?>

更多资源

希望这能回答你的问题：）

Answer 3

除了GET之外，您不能使用JSONP进行任何类型的请求。您无法使用GET请求上传文件（除非它是一个非常小的文件，您可以使用JavaScript读取并转换为可被视为常规表单数据的字符串）。

您需要切换到使用带CORS的POST（或同一来源的代理）来禁用相同的原始策略。

Answer 4

对于跨域工作，您需要这些东西 -

1： - 您需要服务器的许可。像Access-Control-Allow-Origin：*。

2： - 如果您使用的是jquery，那么您可以使用jsonp方法。

3： - 如果你想使用普通的javascript，那么你可以使用这个链接 -

How to make a JSONP request from Javascript without JQuery?

Answer 5

正如人们所说 - GET不是这样做的方式。我通过一个隐藏的iFrame看到了这种事情。您可以找到各种jQuery插件来实现所需的结果但是我发现了一个名为“jQuery iFrame Transport”的插件 https://cmlenz.github.io/jquery-iframe-transport/
希望这会对你有所帮助。

Answer 6

您无法使用JSONP或使用GET请求上传文件。你确定它早些时候适用于同一个来源吗？

您必须向上传文件发送跨域XHR请求。您可以使用JQuery File上传。 https://github.com/blueimp/jQuery-File-Upload/wiki/Cross-domain-uploads

使用jQuery上传跨域文件

6 个答案:

JSONP

CORS

如何提出CORS请求：