Fetch - Отсутствует граница в multipart/form-data POST

спасибо за остановку.

Я хочу отправить new FormData() в качестве body запроса 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
  }
)

Ответы

Ответ 1

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

Ответ 2

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

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

    • для a, это будет что-то вроде

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

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

    • для b, это application/x-www-form-urlencoded;

Ответ 3

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

Ответ 4

Я удалил "Content-Type" и добавил "Accept" в заголовки http, и это сработало для меня. Вот заголовки, которые я использовал,

'headers': new HttpHeaders({
        // 'Content-Type': undefined,
        'Accept': '*/*',
        'Authorization': 
        "Bearer "+(JSON.parse(sessionStorage.getItem('token')).token),
        'Access-Control-Allow-Origin': this.apiURL,
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
        'Access-Control-Allow-Headers': 'origin,X-Requested-With,content-type,accept',
        'Access-Control-Allow-Credentials': 'true' 

      })

Ответ 5

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

Поэтому можно добавить request.headers = {content-type: undefined}

Ответ 6

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

Ваш код становится:

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

fetch('https://api.myapp.com',
  {
    method: 'POST',
    body: formData
  }
)