Загрузка файла CAS Amazon S3 с помощью jQuery Ajax-запроса

Question

Я сейчас почти проверял все, и большинство людей, которых они решили, это просто настроить CORS на службе S3, что не делает трюк для меня. Я должен что-то упустить. Вот оно:

Я пытаюсь загрузить мои файлы на Amazon S3, используя вызов Ajax на стороне клиента. Я знаю, что моя политика/подпись правильна, так как она работает, когда я просто отправить форму, но когда я пытаюсь сделать вызов Ajax с ним я получаю ошибку

Origin "my host" is not allowed by Access-Control-Allow-Origin. 

. Моя форма:

<form id="fileform" action="https://mybucket.s3.amazonaws.com/" method="post" enctype="multipart/form-data"> 
    <input type="hidden" name="key" value="mykey"> 
    <input type="hidden" name="AWSAccessKeyId" value="myaccesskey"> 
    <input type="hidden" name="acl" value="public-read"> 
    <input type="hidden" name="Content-Type" value="image/jpeg"> 
    <input type="hidden" name="policy" value="mypolicy"> 
    <input type="hidden" name="signature" value="mysignature"> 
    </form> 

И в моем CORS ведра я практически позволить все, потому что я в отчаянии:

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedMethod>HEAD</AllowedMethod> 
     <AllowedMethod>PUT</AllowedMethod> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedMethod>DELETE</AllowedMethod> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

Выбор файл и отправке формы (либо, нажав на него или с помощью JQuery) работает как шарм, но выполнение запроса Ajax с сериализованной формой дает мне ошибку.

var form = $('#fileform'); 
$.ajax({ 
    url: "https://mybucket.s3.amazonaws.com/", 
    type: 'post', 
    crossDomain: true, 
    dataType: 'xml', 
    data: form.serialize() 
}); 

Я знаю, что это имеет какое-то отношение к правилам CORS, но, как вы видите, они настроены. Поэтому кто-нибудь может понять, что еще может быть неправильно?

Спасибо.

Answer 1

Оказывается, что сообщение об ошибке, отображаемое в консоли Chrome, не имеет ничего общего с фактической ошибкой.

Проблема была jquery.serialize() не сохраняет входной файл, потому что он не поддерживается в XMLHttpRequest (только в XMLHttpRequest 2). Таким образом, запрос ajax, который я отправлял на S3, не содержал файл. Не знаю, почему S3 возвращал ошибку CORS, но как только я переключился на использование FormData, все сработало. Теперь мне просто нужно выяснить, как поддерживать IE 8 & 9 ...!

Answer 2

Вы можете добавить больше HTML-тегов <input type="file" name="uploadFile" />, так как без файла вы не можете публиковать данные файла, используя метод serialize(). И я предлагаю вам использовать serializeArray() вместо form.serialize().