Vanilla javascript Fetch API formData загрузить

Question

Я пытаюсь отправить данные формы в мой API, размещенный на heroku. В API я обнаружил ошибки в пустых полях ввода. Кажется, что я отправляю данные правильно (по моему мнению). Но я продолжаю получать это сообщение об ошибке, которое, как я знаю, является ответом от API, поскольку это пользовательская ошибка:

{
    "message": {
        "typeofincident": "Type field is required"
    }
}

Ниже мой код JavaScript:

function postIncident(e) {
  e.preventDefault();
  let token = sessionStorage.getItem('token');
  let formdata = new FormData();
  formdata.append("typeofincident", 'typeofincident', document.getElementById('record_type').value);
  formdata.append("description", document.getElementById('description').value);
  formdata.append("location", document.getElementById('location').value);
  formdata.append('file', document.getElementById("media").files[0]); 
  fetch('https://issaireporterv2.herokuapp.com/api/v2/incidents', {
      method: 'POST',
      body: formdata,
      headers: {
        'Authorization': 'Bearer ' + token,
        'Content-Type': 'application/x-www-form-urlencoded',
        'content-type': 'multipart/form-data'
      }
    })
    .then(res => res.json())
    .then(data => {
      if (data.Message) {
        alert(data.Message)
      } else {
        alert(data.Error)
      }
    })
}

Полезная нагрузка запроса выглядит следующим образом:

------WebKitFormBoundaryPoo9tZT7joBLu8YB
Content-Disposition: form-data; name="typeofincident"


------WebKitFormBoundaryPoo9tZT7joBLu8YB
Content-Disposition: form-data; name="description"

theft
------WebKitFormBoundaryPoo9tZT7joBLu8YB
Content-Disposition: form-data; name="location"

Latitude: -1.2094403999999999 Longitude: 36.8949247
------WebKitFormBoundaryPoo9tZT7joBLu8YB
Content-Disposition: form-data; name="file"; filename="user view.png"
Content-Type: image/png


------WebKitFormBoundaryPoo9tZT7joBLu8YB--

Может кто-нибудь помочь, где я не прав? Спасибо!

Answer 1

Вы устанавливаете Content-Type дважды.

Как только вы заявили, что это было application / x-www-form-urlencoded, это не так.

Затем вы заявили, что это были multipart / form-data, но вы не указали границу (WebKitFormBoundaryPoo9tZT7joBLu8YB ... не то, чтобы вы могли знать, какая граница будет сгенерирована для вас), поэтому ее невозможно проанализировать.

Не переопределяет fetch API, сгенерированный Content-Type.