Проблема при отправке запроса через jQuery AJAX для загрузки файла

Question

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

У меня есть curl command, как показано ниже, который я экспортировал из Почтальона :

curl -X POST \
  https://dev.example.com/api/candidates/socially360/ \
  -H 'Content-Type: multipart/form-data' \
  -H 'Postman-Token: ee4683a0-97d2-4ac9-b2e0-1a2cef24ce7d' \
  -H 'cache-control: no-cache' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -F 'resume=@C:\Users\Thanthu Nair\Desktop\dp-converted.pdf' \
  -F 'name=Thanthu' \
  -F email=testmail@example.com \
  -F 'phone=+911234567890' \
  -F job=12345 \
  -F 'key=SECRECT_KEY'

Я хочу сделать такой же запрос с помощью jQuery AJAX (или JavaScript XMLHttpRequest также подойдет). Поэтому я экспортировал код JQuery AJAX для того же запроса от Почтальона . Ниже приведен код:

var form = new FormData();
form.append("resume", "C:\\Users\\Thanthu Nair\\Desktop\\dp-converted.pdf");
form.append("name", "Thanthu");
form.append("email", "testmail@example.com");
form.append("phone", "+911234567890");
form.append("job", "12345");
form.append("key", "SECRECT_KEY");

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://dev.example.com/api/candidates/socially360/",
  "method": "POST",
  "headers": {
    "Content-Type": "multipart/form-data",
    "cache-control": "no-cache",
    "Postman-Token": "087fc592-86c7-40d0-a216-dd928fdf5a46"
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

Но я получаю другой ответ в случае кода JQuery (также устал от JavaScript XMLHttpRequest и получал тот же ответ, что и в случае JQuery). Я не могу понять, в чем проблема.

Также, когда я копирую команду curl из запроса jQuery AJAX из Консоль разработчика Chromes Я получаю скручивание, как показано ниже, которое не является проблемой , но может быть оно поможет ответить.

curl "https://dev.example.com/api/candidates/socially360/" -H "Accept: */*" -H "Referer: http://localhost:8888/view/491/1558604095009_491_53" -H "Origin: http://localhost:8888" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36" -H "Content-Type: multipart/form-data" --data-binary ^"------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"resume^\^"^

^

C:^\^\Users^\^\Thanthu Nair^\^\Desktop^\^\dp-converted.pdf^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"name^\^"^

^

Thanthu^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"email^\^"^

^

testmail@example.com^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"phone^\^"^

^

+911234567890^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"job^\^"^

^

12345^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"key^\^"^

^

SECRECT_KEY^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq--^

^" --compressed

EDIT: Ниже приведен код, который я написал, прежде чем пытаться использовать код из Postman, который также дал другой ответ.

$.ajax({
        url: external.externalUrl,
        data: extData,
        cache: false,
        crossDomain : true,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function (res) {
            defer.resolve(JSON.parse(res));
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            defer.reject(new Error(errorThrown));
        }
});

EDIT:

Я также могу загрузить код Java, который был экспортирован из Postman, ниже приведен код, поэтому проблема заключается в загрузке из внешнего интерфейса, я думаю:

OkHttpClient client = new OkHttpClient();

MediaType mediaType = MediaType.parse("multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW");
RequestBody body = RequestBody.create(mediaType, "------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"resume\"; filename=\"C:\\Users\\Thanthu Nair\\Desktop\\dp-converted.pdf\"\r\nContent-Type: application/pdf\r\n\r\n\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"name\"\r\n\r\nThanthu\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"email\"\r\n\r\ntest@example.com\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"phone\"\r\n\r\n+911234512345\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"job\"\r\n\r\n12345\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"key\"\r\n\r\nSECRET_KEY\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW--");
Request request = new Request.Builder()
  .url("https://dev.example.com/api/candidates/socially360/")
  .post(body)
  .addHeader("content-type", "multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW")
  .addHeader("cache-control", "no-cache")
  .addHeader("Postman-Token", "523d66c8-b4b9-4d97-a022-94b9adbfc73f")
  .build();

Response response = client.newCall(request).execute();

Answer 1

Похоже, что проблема возникла со стороны сервера, поскольку данные не были доступны для значения задания, которое я передавал в запросе, когда я использовал написанный мной код, который не был экспортирован из Postman, так как я передавал полученное значениеиз моей БД, которая не существует в их.Ниже приведен код:

$.ajax({
        url: external.externalUrl,
        data: extData,
        cache: false,
        crossDomain : true,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function (res) {
            defer.resolve(JSON.parse(res));
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            defer.reject(new Error(errorThrown));
        }
});

Однако это не объясняет, почему копирование, вставляющее точный код из Postman, не сработало, поскольку у него было жестко закодированное значение для задания, которое работало из Postman.

Однако, поскольку я решил проблему, я публикую этот ответ.