0

If I write some code to do a fetch for some multipart/form-data which looks like:

const authorization = btoa('AAAAA:BBBBB')
const data = new FormData()

data.append('grant_type', 'password')
data.append('username', 'XXXXX')
data.append('password', 'YYYYY')

const response = await fetch('https://www.example.com/endpoint/', {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: `Basic ${authorization}`
    },
    body: data
})

It will not work. The reason is that when sending the request, the Content-Type in the header does not contain the boundary information required. If instead the fetch is written as:

const response = await fetch('https://www.example.com/endpoint/', {
    method: 'POST',
    headers: {
      Authorization: `Basic ${authorization}`
    },
    body: data
})

The request will work because the system will automatically generate the correct Content-Type as multipart/form-data with the boundary information.

My question is where can I find documentation that it will do this? I have looked around at https://developer.mozilla.org/en-US/docs/Web/API/fetch, etc. but my eyes must be glazing over where it is mentioned. I have not found it yet.

Eric G
  • 340
  • 1
  • 12

0 Answers0