HTTP Module using wrong Content-Type for multipart/form-data

🐞 bug report

Affected Package

The issue is is affecting package @angular/common/http

Is this a regression?

Not sure, only tested on Angular version 9.1.7

Description

Currently trying to upload a large file from Angular v9.1.7 to a Django API. I’ve been receiving the following error:

Multipart form parse error - Invalid boundary in multipart: None

Chrome’s dev tools request header shows: Content-Type: multipart/form-data

But should resemble the following: Content-Type: multipart/form-data;boundary=----WebKitFormBoundaryyrV7KO0BoCBuDbTL

See the full discussion for this issue here: https://github.com/github/fetch/issues/505 (@dgraham’s response)

🔬 Minimal Reproduction

Here’s a minimal sample of what’s being used in Angular:

// Angular HTTP Module - POST method
const options: HttpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'multipart/form-data',
        'Authorization': `Bearer ${token}`
    })
}
this.http.post<any>(url, body, options).subscribe(res => {})

Here’s my work around using the Github link provided in the description above:

// Native Javascript Fetch Method
fetch(url, {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${token}` },
    body: body,
});

Note that Fetch does not append a default content-type like the HTTP module. This means there is no satisfactory work around without using Fetch in place of the HTTP module currently.

🔥 Exception or Error

Multipart form parse error - Invalid boundary in multipart: None

Chrome’s dev tools request header shows: Content-Type: multipart/form-data

But should resemble the following: Content-Type: multipart/form-data;boundary=----WebKitFormBoundaryyrV7KO0BoCBuDbTL

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.6
Node: 12.14.1
OS: darwin x64

Angular: 9.1.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.6
@angular-devkit/build-angular     0.901.6
@angular-devkit/build-optimizer   0.901.6
@angular-devkit/build-webpack     0.901.6
@angular-devkit/core              9.1.6
@angular-devkit/schematics        9.1.6
@angular/cdk                      9.2.4
@angular/cli                      9.1.6
@angular/material                 9.2.4
@ngtools/webpack                  9.1.6
@schematics/angular               9.1.6
@schematics/update                0.901.6
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Tested in Chrome version 83.0.4103.97

[bwqr]

I think, I also hit this bug. In my case, my "Content-Type": "multipart/formdata" header is overwritten by "Content-Type": "application/json". This causes backend to parse requests incorrectly. A simple example is:

 const formData = new FormData();
 formData.append('image', image);

 let headers = new HttpHeaders();
    headers = headers.append('Content-Type', 'multipart/form-data');
    headers = headers.append('enctype', 'multipart/form-data');

this.http
     .post(url, formData, {headers}).subscribe(_ => {});

Whatever I have tried, like not setting any header, in network tab of dev tools shows me the "Content-Type": "application/json" value.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.7
Node: 14.8.0
OS: linux x64

Angular: 10.0.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.7
@angular-devkit/build-angular     0.1000.7
@angular-devkit/build-optimizer   0.1000.7
@angular-devkit/build-webpack     0.1000.7
@angular-devkit/core              10.0.7
@angular-devkit/schematics        10.0.7
@angular/cdk                      10.1.3
@angular/cli                      10.0.7
@angular/material                 10.1.3
@ngtools/webpack                  10.0.7
@schematics/angular               10.0.7
@schematics/update                0.1000.7
rxjs                              6.6.2
typescript                        3.9.7
webpack                           4.43.0

[bwqr]

I am indeedly sorry for misinformation. The cause of my problem is the http interceptor, which is setup by myself. I was overriding the content-type in interceptor. After fixing the interceptor, my request’s headers are sent as expected.