Загрузка CORS Amazon S3 с помощью запроса jQuery Ajax

Сейчас я почти все проверял, и большинство людей, которых они решили, это просто настроить 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, но, как вы видите, они настроены. Поэтому кто-нибудь может подумать, что еще может быть неправильно?

Спасибо.

Ответы

Ответ 1

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

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

Ответ 2

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