我尝试使用 jQuery Dropzone 将图像上传到 Imgur 或任何其他域，但这不起作用。

这是我的放置区设置:

$("div.dropzone").dropzone
  success: -> console.log arguments
  paramName: "image"
  method: "post"
  maxFilesize: 2
  url: "https://api.imgur.com/3/upload"
  headers:
    Authorization: "Client-ID *************"

这行不通。它表示返回码为 0。请求 header :

Host: api.imgur.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:31.0) Gecko/20100101 Firefox/31.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Origin: http://my.opencubes.io
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization,cache-control,x-requested-with
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

首先，您可以看到 cient id 没有出现 :(。但最大的问题是使用的方法是 OPTIONS。响应 header :

我尝试将文件上传到我的另一个域时遇到同样的问题(dropzone 位于子域中)

在控制台中我看到:

Une demande multi-origines (Cross-Origin Request) a été bloquée : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://api.imgur.com/3/upload. Ceci peut être corrigé en déplaçant la ressource sur le même domaine ou en activant CORS.

可以翻译成

A multi-origin request was blocked: the policy "Same origin" does not allow to see remote resource located in https://api.imgur.com/3/upload. this an be fixed by moving the resource on the samin domain or by enabling CORS.

最佳答案

OPTIONS 请求是一个普通请求:用于请求与 CORS 限制相关的权限。看看this page了解 CORS 的幕后工作原理。

在您的情况下，这是一个纯粹的 CORS 相关问题。 OPTIONS 请求包含此 header :

Access-Control-Request-Headers: authorization,cache-control,x-requested-with

这意味着:我可以在我的标题中使用“authorization”、“cache-control”和“x-requested-with” header 吗跨域 AJAX 请求 ?

您得到的响应如下:

Access-Control-Allow-Headers :"Authorization, Content-Type, Accept, X-Mashape-Authorization"

这意味着:您只能使用这些 header :“Authorization”、“Content-Type”、“Accept”和“X-Mashape-Authorization”。

如您所见，“cache-control”和“x-requested-with”未列出在允许列表中，导致浏览器拒绝请求。

我来到了 2 个显示此行为的测试代码示例:

示例 1(工作)

var data = new FormData();
data.append('image', 'http://placehold.it/300x500');

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.imgur.com/3/upload', true);
xhr.setRequestHeader('Authorization', 'Client-ID xxxxxxxxxx');
xhr.send(data);

以下是运行此代码时发送的预检请求 header (如 Firefox 30 devtools 所示，我已经删除了不相关的 header ，例如 User-Agent、Accept ...):

• 选项 https://api.imgur.com/3/upload
• 主办方:api.imgur.com
• 来源:http://local.host:8080
• 访问控制请求方法:POST
• 访问控制请求 header :授权
• 缓存控制:无缓存

以及相应的响应头

• 访问控制允许来源:"*"
• 访问控制允许方法:“GET、PUT、POST、DELETE、OPTIONS”
• Access-Control-Allow-Headers :"Authorization, Content-Type, Accept, X-Mashape-Authorization"

在这里，我们可以看到我们提示访问“authorization” header ，并且服务器正在接受这个 header ，以及 POST 方法和任何源 URL，因此满足 CORS 要求并且请求被允许浏览器。

示例 2(不工作)

var data = new FormData();
data.append('image', 'http://placehold.it/300x500');

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.imgur.com/3/upload', true);
xhr.setRequestHeader('Authorization', 'Client-ID xxxxxxxxxx');
// the only difference with the previous code is this line
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.send(data);

预检请求的 header :

• 选项 https://api.imgur.com/3/upload
• 主办方:api.imgur.com
• 来源:http://local.host:8080
• 访问控制请求方法:POST
• Access-Control-Request-Headers:授权，缓存控制
• 缓存控制:无缓存

预检响应的 header (与示例 1 相同):

• 访问控制允许来源:“*”
• 访问控制允许方法:“GET、PUT、POST、DELETE、OPTIONS”
• Access-Control-Allow-Headers :"Authorization, Content-Type, Accept, X-Mashape-Authorization"

这里的“Access-Control-Request-Headers”头提示访问的是“cache-control”，服务器没有提供，所以不满足的CORS要求，请求是被浏览器拒绝。

这是一个 JSFiddle，针对您的问题引用了不同的工作和不工作演示:http://jsfiddle.net/pomeh/Lfajnebh/ .注意细节以了解正在发生的事情，评论很少，但它们在这里强调代码中最棘手的部分。

作为奖励，我已经向 DropZone 的 GitHub 存储库发送了一个拉取请求来解决这个问题 (https://github.com/enyo/dropzone/pull/685)，它允许您删除 DropZone 的预定义 header 。试一试:

var myDropzone = new Dropzone('.dropzone', {
    //...
    headers: {
        'Authorization': authorizationHeader,
        // remove Cache-Control and X-Requested-With
        // to be sent along with the request
        'Cache-Control': null,
        'X-Requested-With': null
    }
});

上面的代码应该适用于我的补丁版本(https://github.com/pomeh/dropzone/commit/f0063db6e5697888582421865840258dec1ffdc1)，而上面的代码不应该:

var myDropzone = new Dropzone('.dropzone', {
    //...
    headers: {
        'Authorization': authorizationHeader,
        // remove Cache-Control and X-Requested-With
        // to be sent along with the request
    }
});

关于javascript - jQuery Dropzone 的 CORS 问题并上传到 Imgur，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25427627/