jQuery Dropzone 的 CORS 问题并上传到 Imgur

问题描述

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

I tried to use jQuery Dropzone to upload an image to Imgur or any other domain but that's not working.

这是我的放置区设置:

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

This doesn't work. It says that return code is 0. The request headers:

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

First as you can see the cient id doesn't appear :(. But the big problem is that the method used is OPTIONS. The response headers:

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

可以翻译的

多源请求被阻止:同源"策略不允许查看位于 https://api.imgur.com/3/upload.这可以通过移动 samin 域上的资源或启用 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 限制相关的权限.查看此页面了解如何CORS 在后台工作.

The OPTIONS request is a normal request: this is used to ask for permissions relative to CORS restrictions. Have a look to this page to understand how CORS work under the hood.

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

In your case, this is a pure CORS related issue. The OPTIONS request contains this header:

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

这意味着:我可以在我的跨域AJAX请求?

Which means: can I use "authorization", "cache-control" and "x-requested-with" headers in my cross-domain AJAX request ?

您得到的响应如下:

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

这意味着:您只能使用这些标头:Authorization"、Content-Type"、Accept"和X-Mashape-Authorization".

Which means: you're allowed to use those headers only: "Authorization", "Content-Type", "Accept", and "X-Mashape-Authorization".

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

As you can see, "cache-control" and "x-requested-with" are not listed in the allowed list, causing the browser to reject the request.

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

I've come to 2 test code sample which show this behavior:

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 ...):

Here are the preflight request's headers sent when running this code (as shown by Firefox 30 devtools, and I've removed unrelated headers such as User-Agent, Accept ...):

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

以及对应的响应头

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

• access-control-allow-origin :"*"
• Access-Control-Allow-Methods :"GET, PUT, POST, DELETE, OPTIONS"
• Access-Control-Allow-Headers :"Authorization, Content-Type, Accept, X-Mashape-Authorization"

在这里，我们可以看到我们提示访问授权"头，并且服务器正在接受这个头，以及POST方法和任何原始URL，因此满足CORS要求并且请求被允许浏览器.

Here, we can see that we prompt access to the "authorization" header, and the server is accepting this header, allong with the POST method and any origin URL, so the CORS requirements are satisfied and the request is allowed by the browser.

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 相同):

Preflight response's headers (which is the same as in example 1):

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

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

Here, the "Access-Control-Request-Headers" header prompt access for "cache-control", which the server does not provide, so the CORS requirements are not satisfied and the request is rejected by the browser.

这里有一个 JSFiddle 引用不同的工作和不工作的演示来解决你的问题:http://jsfiddle.net/pomeh/Lfajnebh/.注意细节以了解发生了什么，评论很少，但他们在这里强调代码中最棘手的部分.

Here's a JSFiddle referencing different working and not working demos for your problem: http://jsfiddle.net/pomeh/Lfajnebh/. Pay attention to details to understand what's going on, there is few comments but they are here to emphasis trickiest parts of the code.

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

As a bonus, I've sent a pull request to DropZone's GitHub repository to fix this problem (https://github.com/enyo/dropzone/pull/685) which allows you to remove pref-defined headers by DropZone. Give it a try:

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)，而上面的代码不应该:

The code above should work with my patched version (https://github.com/pomeh/dropzone/commit/f0063db6e5697888582421865840258dec1ffdc1), whereas the code above should not:

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

这篇关于jQuery Dropzone 的 CORS 问题并上传到 Imgur的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！