fetch - Missing boundary in multipart/form-data POST

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.

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;

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