天天干天天操天天爱,欧美一区二区三区四区五区,久草综合在线

本文介紹了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模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！

pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

jQuery Dropzone 的 CORS 問題并上傳到 Imgur

問題描述

推薦答案

相關文檔推薦