fetch-отсутствующая граница в multipart / form-data POST

спасибо, что зашли.

я хочу послать new FormData() как body of a POST запрос с использованием fetch api

операция выглядит примерно так

var formData = new FormData()
formData.append('myfile', file, 'someFileName.csv')

fetch('https://api.myapp.com', 
  {
    method: 'POST',
    headers: {
      "Content-Type": "multipart/form-data"
    },
    body: formData
  }
)

проблема здесь в том, что граница, что-то вроде

boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu

никогда не попадает в Content-Type: заголовок

это должно выглядеть это

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu

при попытке" той же " операции с new XMLHttpRequest() вот так

var request = new XMLHttpRequest()
request.open("POST", "https://api.mything.com")
request.withCredentials = true
request.send(formData)

заголовки правильно установлены

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu

Итак, мой вопрос:

  1. как сделать fetch ведите себя точно так же, как XMLHttpRequest в этой ситуации?

  2. если это невозможно, почему?

спасибо всем! Это сообщество является более или менее причиной моего профессионального успеха.

23
fetch fetch-api form-data javascript xmlhttprequest

4 ответов

решение проблемы состоит в том, чтобы явно установить Content-Type до undefined чтобы ваш браузер или любой клиент, который вы используете, мог установить его и добавить это граничное значение для вас. Разочаровывает, но это правда.

50

Я использую aurelia-api (обертка для aurelia-fetch-client). В этом случае тип контента по умолчанию- "application/json". Так Что Я Установите тип контента в undefined и это сработало как заклинание.

2
fetch(url,options)
  1. если вы задаете строку options.body, вы должны установить Content-Type в заголовке запроса ,или это будет text/plain по умолчанию.

  2. если параметры.тело-это конкретный объект, такой как let a = new FormData() или let b = new URLSearchParams(), вам не нужно устанавливать Content-Type вручную.Он будет добавлен автоматически.

    • на a ,это будет что-то вроде

    multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

    как вы видите, граница автоматически добавлен.

    • на b, это application/x-www-form-urlencoded;
2

добавить headers:{content-type: undefined} браузер создаст для вас границу то есть для загрузки файла часть и часть с потокового если вы добавляете "несколько / form-data", это означает, что вы должны создать потоковую передачу и загрузить файл часть и часть

поэтому можно добавить запрос.headers = {content-type: undefined}

0