fetch - Missing boundary in multipart/form-data POST

Question

thanks for stopping by.

I want to send a new FormData() as the body of a POST request using the fetch api

the operation looks something like this

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
  }
)

the problem here is that the boundary, something like

boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu

never makes it into the Content-Type: header

it should look like this

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

when you try the "same" operation with a new XMLHttpRequest(), like so

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

the headers are correctly set

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

so my question is,

how do I make fetch behave exactly like XMLHttpRequest in this situation?
if this is not possible, why?

Thanks everybody! This community is more or less the reason I have professional success.

James · Accepted Answer · 2017-01-13T16:04:59.180

149

The solution to the problem is to explicitly set Content-Type to undefined so that your browser or whatever client you're using can set it and add that boundary value in there for you. Disappointing but true.

edited Jan 13 '17 at 16:04

answered Sep 01 '16 at 21:30

James

3,879
2
20
26

22

using fetch, I removed the Content-Type header and it worked. – sww314 Feb 28 '17 at 16:02
20

Unbelievable!! I spent hours until I found this!! `delete result.headers['Content-Type'];` worked for me, thanks!! – Crysfel Apr 12 '17 at 01:26
1

@Crysfel Thanks.. deleting content type worked for me :P – master_dodo Jun 09 '17 at 16:28
9

doesn't work for me. Setting to undefined defaults to text/plain. – sebnukem Jul 05 '17 at 01:51
@sebnukem which browser? I've never seen that happen, I'll admit though, I switched over to using Axios, it has a nicer api / behavior imo – James Jul 07 '17 at 05:41
@James No problem with the browser. I found out that the HTTP library I was using coerced the body payload to a string. – sebnukem Jul 07 '17 at 12:51
@sebnukem which http lib was that? this post is about `fetch` – James Jul 07 '17 at 17:31
@James, an in-house, proprietary lib – sebnukem Jul 07 '17 at 17:55
But why is it so? – Green Sep 08 '17 at 05:29
@Green Apparently you can define an arbitrary boundary -> https://stackoverflow.com/questions/3508338/what-is-the-boundary-in-multipart-form-data -- I just didn't, I only set the content type, but that is only half the job. On the other hand, If you just leave the content type alone, the browser can infer it, and set the type + the boundary to an appropriate compliant, random string for you. – James Sep 09 '17 at 18:08
4

Neither setting the content-type to undefined, nor deleting the content-type before making the POST with fetch did it for me... – Ahab Jan 16 '18 at 13:11
2 years later, I'd recommend using something like axios unless you absolutely need isomorphic fetch - over the years I've found fetch to be more of a nuisance than a help – James Jan 16 '18 at 14:54
1

Setting value to undefined didn't work for me, but removing header worked :) – Oscar Calderon Mar 09 '18 at 15:13
explicitly setting `Content-Type` to `undefined` worked for me – jaeyow Mar 28 '18 at 05:38
1

Setting the Content-Type header to undefined seemed to come across for me as "Content-Type": undefined in the request itself. not defining it worked. – Scribblemacher Dec 23 '20 at 19:57

score 16 · Answer 2 · answered Dec 19 '18 at 07:16

I removed "Content-Type" and added 'Accept' to http headers and it worked for me. Here are the headers I used,

'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' 

      })

No other solutions worked for me. After adding Accept: */* header, everything worked like a charm. — iVoidWarranties, Jan 23 '20 at 14:18

moonreader · Answer 3 · 2017-08-23T13:14:52.067

12

fetch(url,options)

If you set a string as options.body, you have to set the Content-Type in request header ,or it will be text/plain by default.
If options.body is specific object like let a = new FormData() or let b = new URLSearchParams(), you don't have to set the Content-Type by hand.It will be added automaticlly.
- for a ,it will be something like
multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

as you see, the boundary is automaticlly added.
- for b, it is application/x-www-form-urlencoded;

edited Aug 23 '17 at 13:14

answered Aug 23 '17 at 12:56

moonreader

139
1
5

Very well that you told us that `boundary` is added automatically. We have all known that before. – Green Sep 08 '17 at 05:29
your explanation makes much more sense, thank you! I managed to get my code working! – Eugenijus S. Jun 26 '19 at 14:27

score 8 · Answer 4 · answered Mar 09 '19 at 02:27

I had the same issue, and was able to fix it by excluding the Content-Type property, allowing the browser to detect and set the boundary and content type automatically.

Your code becomes:

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

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

score 5 · Answer 5 · answered Oct 04 '18 at 13:04

Add headers:{content-type: undefined} browser will generate a boundary for you that is for uploading a file part-and-part with streaming if you are adding 'multiple/form-data' it means you should create streaming and upload your file part-and-part

So it is okay to add request.headers = {content-type: undefined}

score 4 · Answer 6 · answered Jan 12 '17 at 02:32

4

I'm using the aurelia-api (an wrapper to aurelia-fetch-client). In this case the Content-Type default is 'application/json'. So I set the Content-Type to undefined and it worked like a charm.

answered Jan 12 '17 at 02:32

Diego Troitiño

291
2
6

fetch - Missing boundary in multipart/form-data POST

6 Answers6

Linked