Я использую 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.
Спасибо Tal за хорошую обратную связь! Переход на _.cloudinary_fileupload() _ сделал магию. Как-то смущает то, что в [Документация JSS Cloudmin] (https://github.com/cloudinary/cloudinary_js) указано, что использовать _.fileupload() _. – andreas
Когда вы говорите «это сделано с помощью включенного JavaScript», вы можете объяснить, как это сделать? Потому что я также должен добавить ручной вызов. Предполагается ли сценарий добавить слушателя в каждый класс .cloudinary-fileupload? Можем ли мы проверить его, когда он не работает? –
jquery.cloudinary.js вызывает cloudinary_fileupload на класс .cloudinary-fileupload при загрузке. Любые новые поля ввода, добавленные через javascript, должны быть инициализированы вручную. –