如何避免CORS預檢文件上傳請求？

我使用jQuery的文件上傳，允許用戶將文件上傳到外部服務（Cloudinary更具體）：如何避免CORS預檢文件上傳請求？

<input type='file' name='file' class='cloudinary-fileupload' 
    data-url='https://api.cloudinary.com/v1_1/wya/auto/upload' /> 
<script> 
    $('.cloudinary-fileupload').fileupload(); 
</script>

因爲它是一個外部目標，瀏覽器啓動CORS請求。但是，我注意到瀏覽器預先安裝了CORS預檢請求。 http://www.html5rocks.com/en/tutorials/cors/提供了關於什麼時候觸發預檢請求以及何時不觸發的很好的見解。據我所知，我的請求符合作爲CORS簡單請求的所有標準（請參見部分'Types of CORS requests'）。

的文件上傳請求被髮送到外部服務：

POST /v1_1/wya/image/upload HTTP/1.1 
Host: api.cloudinary.com 
Connection: keep-alive 
Content-Length: 22214 
Accept: */* 
Origin: http://wya.herokuapp.com 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36 
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarym73rCIa6t8eTNkTa 
Referer: http://wya.herokuapp.com/ 
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2

其被髮送到之前的文件上傳請求的外部服務的附加預檢要求：

OPTIONS /v1_1/wya/image/upload HTTP/1.1 
Host: api.cloudinary.com 
Connection: keep-alive 
Access-Control-Request-Method: POST 
Origin: http://wya.herokuapp.com 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36 
Access-Control-Request-Headers: accept, content-type 
Accept: */* 
Referer: http://wya.herokuapp.com/ 
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2

有沒有辦法避免這個額外的預檢請求？就我所見，文件上傳請求是一個CORS簡單請求，因爲它是一個帶有Content-Type multipart/form-data和簡單請求HTTP頭的HTTP POST。

我爲什麼要甩掉多餘的預檢請求的理由是，Cloudinary發送一個HTTP重定向302/304作爲文件上載的響應。瀏覽器不遵循這些重定向。鉻失敗，出現以下消息：

XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/wya/image/upload. 
The request was redirected to 'http://wya.herokuapp.com/upload?bytes=21534&created_at=2014-02-12T09%3A04%3…d5b62ebb92b9236e5be6d472df242d016&type=upload&version=1392195882&width=723', 
which is disallowed for cross-origin requests that require preflight.

來源

2014-02-12 andreas

的問題是，XHR頭不與請求Cloudinary導致Cloudinary重定向（IE回退），而不是返回的JSON發送。這通常是由於小部件的初始化不當造成的。您通常不需要自己撥打$('.cloudinary-fileupload').fileupload()，因爲這是通過包含的Javascript完成的。如果您仍然需要手動初始化小部件，請使用$('.cloudinary-fileupload').cloudinary_fileupload()。

來源

2014-02-13 02:54:12

謝謝塔爾爲您提供良好的反饋！更改爲_.cloudinary_fileupload（）_確實有幫助。不過混淆了[Cloudinary JS文檔]（https://github.com/cloudinary/cloudinary_js）聲稱使用_.fileupload（）_雖然。 – andreas

當你說'這是由包含的JavaScript完成的'，你能解釋一下嗎？因爲我還要添加手動呼叫。腳本是否應該在每個.cloudinary-fileupload類中添加一個偵聽器？我們可以在失敗時進行測試嗎？ –

jquery.cloudinary.js在加載時調用.cloudinary-fileupload類上的cloudinary_fileupload。任何通過JavaScript添加的新輸入字段都需要手動初始化。 –

如何避免CORS預檢文件上傳請求？

回答

相關問題