CORS与jQuery Dropzone问题并上传到Imgur

Question

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

这是我的dropzone设置:

$("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.请求标头:

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.响应头:

当我尝试将文件上传到我的另一个域时,我遇到了同样的问题(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.

哪个可以翻译

多源请求被阻止:策略"Same origin"不允许查看位于https://api.imgur.com/3/upload的远程资源.这可以通过在samin域上移动资源或启用CORS来修复.

Answer 1

OPTIONS请求是一个普通请求:这用于询问与CORS限制相关的权限.看看这个页面,了解CORS如何在幕后工作.

在您的情况下,这是一个纯粹的CORS相关问题.OPTIONS请求包含此标头:

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

这意味着:我可以在我的跨域AJAX请求中使用" 授权 "," 缓存控制 "和" x-requested-with "标头？

您得到的答复如下:

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

这意味着:您只能使用这些标题:"授权","内容类型","接受"和"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);

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

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

以及相应的响应标题

• access-control-allow-origin:"*"
• Access-Control-Allow-Methods:"GET,PUT,POST,DELETE,OPTIONS"
• Access-Control-Allow-Headers:" 授权,内容类型,接受,X-Mashape-Authorization"

在这里,我们可以看到我们提示访问"authorization"标头,并且服务器正在接受此标头,使用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);

预检请求的标题:

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

预检响应的标题(与示例1中的相同):

• access-control-allow-origin:"*"
• Access-Control-Allow-Methods:"GET,PUT,POST,DELETE,OPTIONS"
• Access-Control-Allow-Headers:"授权,内容类型,接受,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删除预定义的标头.试试看:

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
    }
});