2014-02-12 3 views
4

Я использую JQuery-FileUpload, чтобы позволить пользователям загружать файлы на внешний сервис (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, так как это HTTP-сообщение POST с данными типа multipart/form-data и только простые HTTP-заголовки.


Причина, почему я хочу, чтобы избавиться от дополнительного предполетного запроса является то, что Cloudinary посылает HTTP 302/304 редирект в ответ на загрузку файла. Браузеры не следуют за этими перенаправлениями. Chrome выдает следующее сообщение:

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. 

ответ

10

Проблема заключается в том, что заголовок XHR не отправляется с запросом на Cloudinary, который вызывает Cloudinary для перенаправления (IE запасного варианта) вместо возвращения JSON. Обычно это вызвано неправильной инициализацией виджета. Обычно вам не нужно звонить $('.cloudinary-fileupload').fileupload(), так как это делается с помощью включенного Javascript. Если вам все равно нужно инициализировать виджет вручную, используйте $('.cloudinary-fileupload').cloudinary_fileupload().

+1

Спасибо Tal за хорошую обратную связь! Переход на _.cloudinary_fileupload() _ сделал магию. Как-то смущает то, что в [Документация JSS Cloudmin] (https://github.com/cloudinary/cloudinary_js) указано, что использовать _.fileupload() _. – andreas

+0

Когда вы говорите «это сделано с помощью включенного JavaScript», вы можете объяснить, как это сделать? Потому что я также должен добавить ручной вызов. Предполагается ли сценарий добавить слушателя в каждый класс .cloudinary-fileupload? Можем ли мы проверить его, когда он не работает? –

+0

jquery.cloudinary.js вызывает cloudinary_fileupload на класс .cloudinary-fileupload при загрузке. Любые новые поля ввода, добавленные через javascript, должны быть инициализированы вручную. –

 Смежные вопросы

  • Нет связанных вопросов^_^