fetch - Missing boundary in multipart/form-data POST

Solution 1:

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.

Solution 2:

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' 

      })

Solution 3:

fetch(url,options)

1. 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.

2. 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;