JQuery: неправильная кодировка данных в запросе AJAX

Question

Я пытаюсь выполнить этот простой AJAX запрос с JQuery:

const data = new FormData();
data.append("foo", "bar");
$.ajax({
    url: "http://localhost:8080/example",
    type: "post",
    data: data,
    processData: false
});

Я проверяю запрос с помощью инструментов разработчика Google Chrome. Я вижу, что Content-type - это application/x-www-form-urlencoded; charset=UTF-8, что ожидается, но фактические данные отправляются в многочастной кодировке:

------WebKitFormBoundaryEzaaFpNlUo3QpKe1
Content-Disposition: form-data; name: "foo"

bar
------WebKitFormBoundaryEzaaFpNlUo3QpKe1--

Конечно, мое бэкэнд-приложение не ожидает такой кодировки и дает сбой. Что не так и как заставить JQuery отправлять данные в формате urlencoded? Я попытался передать дополнительные заголовки или опции contentType, но ничего не работает.

Answer 1

вы также должны добавить contentType: false

  $.ajax({
        url: "http://localhost:8080/example",
        type: "post",
        data: data,
        processData: false,
        contentType: false,
        success: function (data) {

         }
    });

Answer 2

FormData всегда отправляется как multipart/form-data. Обычно он используется при загрузке файла или большого двоичного объекта, которые не могут быть закодированы в URL.

Если вы хотите закодировать в URL, не используйте FormData. Используйте обычный объект, и jQuery будет правильно его кодировать.

const data = {foo: "bar"};

Кроме того, не используйте processData: false, когда вы делаете это.