使用Dropzone.JS将图像上传到Imgur

Question

我已经创建了一个页面,网站的用户可以通过拖放来上传图片.为此,我使用Dropzone.JS (转到infosite或Github),我将文件上传到Imgur.

问题是我不知道如何用DropZone.JS做到这一点.这是我用于实现Dropzone-class的代码.

<div class="dropzone">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</div>

<script src="~/Scripts/DropZone.js" type="text/javascript"></script>    

<script>
    var myDropzone = new Dropzone(".dropzone", { 
        url: "https://api.imgur.com/3/image", 
        Authorization: 'Client-ID MY_CLIENT_ID'
    });
</script>

以下是我从Imgur得到的回复

{
    "data": {
        "error": "An image ID is required for a GET request to /image",
        "request": "/3/image",
        "method": "GET"
    },
    "success": false,
    "status": 400
}

出现此错误:

XMLHttpRequest无法加载https://api.imgur.com/3/image.预检响应中Cache-Control不允许请求标头字段Access-Control-Allow-Headers.

如果请求成功,我也会从Imgur获取上传图像的URL.

Answer 1

如果来自imgur的启用CORS的服务不包含通过其Access-Control-Allow-Headers:响应头的"Cache-Control",则不满足CORS要求并且浏览器拒绝该请求.

试试这个:

var myDropzone = new Dropzone('.dropzone', {
    //...
    headers: {
        'Authorization': authorizationHeader,
        'Cache-Control': null,
        'X-Requested-With': null
    }
});