fix: multipart/form-data header issues with node/js fetch targets

Author: erunion

src/targets/javascript/fetch/client.ts

@@ -11,6 +11,7 @@
 import stringifyObject from 'stringify-object';
 
 import { CodeBuilder } from '../../../helpers/code-builder';
+import { getHeaderName } from '../../../helpers/headers';
 import { Client } from '../../targets';
 
 interface FetchOptions {
@@ -37,6 +38,15 @@ export const fetch: Client<FetchOptions> = {
       method,
     };
 
+    // The FormData API automatically adds a `Content-Type` header for `multipart/form-data`
+    // content and if we add our own here data won't be correctly transmitted.
+    if (postData.mimeType === 'multipart/form-data') {
+      const contentTypeHeader = getHeaderName(allHeaders, 'content-type');
+      if (contentTypeHeader) {
+        delete allHeaders[contentTypeHeader];
+      }
+    }
+
     if (Object.keys(allHeaders).length) {
       options.headers = allHeaders;
     }

src/targets/javascript/fetch/fixtures/multipart-data.js

@@ -1,10 +1,7 @@
 const form = new FormData();
 form.append('foo', 'Hello World');
 
-const options = {
-  method: 'POST',
-  headers: {'content-type': 'multipart/form-data; boundary=---011000010111000001101001'}
-};
+const options = {method: 'POST'};
 
 options.body = form;
 

src/targets/javascript/fetch/fixtures/multipart-file.js

@@ -1,10 +1,7 @@
 const form = new FormData();
 form.append('foo', 'test/fixtures/files/hello.txt');
 
-const options = {
-  method: 'POST',
-  headers: {'content-type': 'multipart/form-data; boundary=---011000010111000001101001'}
-};
+const options = {method: 'POST'};
 
 options.body = form;
 

src/targets/javascript/fetch/fixtures/multipart-form-data.js

@@ -1,10 +1,7 @@
 const form = new FormData();
 form.append('foo', 'bar');
 
-const options = {
-  method: 'POST',
-  headers: {'Content-Type': 'multipart/form-data; boundary=---011000010111000001101001'}
-};
+const options = {method: 'POST'};
 
 options.body = form;
 

src/targets/node/fetch/client.ts

@@ -11,6 +11,7 @@
 import stringifyObject from 'stringify-object';
 
 import { CodeBuilder } from '../../../helpers/code-builder';
+import { getHeaderName } from '../../../helpers/headers';
 import { Client } from '../../targets';
 
 export const fetch: Client = {
@@ -35,6 +36,15 @@ export const fetch: Client = {
       method,
     };
 
+    // The `form-data` module automatically adds a `Content-Type` header for `multipart/form-data`
+    // content and if we add our own here data won't be correctly transmitted.
+    if (postData.mimeType === 'multipart/form-data') {
+      const contentTypeHeader = getHeaderName(headersObj, 'content-type');
+      if (contentTypeHeader) {
+        delete headersObj[contentTypeHeader];
+      }
+    }
+
     if (Object.keys(headersObj).length) {
       reqOpts.headers = headersObj;
     }

src/targets/node/fetch/fixtures/multipart-data.js

@@ -7,10 +7,7 @@ formData.append('foo', fs.createReadStream('hello.txt'));
 
 let url = 'http://mockbin.com/har';
 
-let options = {
-  method: 'POST',
-  headers: {'content-type': 'multipart/form-data; boundary=---011000010111000001101001'}
-};
+let options = {method: 'POST'};
 
 options.body = formData;
 

src/targets/node/fetch/fixtures/multipart-file.js

@@ -7,10 +7,7 @@ formData.append('foo', fs.createReadStream('test/fixtures/files/hello.txt'));
 
 let url = 'http://mockbin.com/har';
 
-let options = {
-  method: 'POST',
-  headers: {'content-type': 'multipart/form-data; boundary=---011000010111000001101001'}
-};
+let options = {method: 'POST'};
 
 options.body = formData;
 

src/targets/node/fetch/fixtures/multipart-form-data.js

@@ -6,10 +6,7 @@ formData.append('foo', 'bar');
 
 let url = 'http://mockbin.com/har';
 
-let options = {
-  method: 'POST',
-  headers: {'Content-Type': 'multipart/form-data; boundary=---011000010111000001101001'}
-};
+let options = {method: 'POST'};
 
 options.body = formData;