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

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 {
@@ -59,6 +60,13 @@ export const fetch: Client<FetchOptions> = {
           break;
         }
 
+        // 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.
+        // eslint-disable-next-line no-case-declarations -- We're only using `contentTypeHeader` within this block.
+        const contentTypeHeader = getHeaderName(allHeaders, 'content-type');
+        if (contentTypeHeader) {
+          delete allHeaders[contentTypeHeader];
+        }
+
         push('const form = new FormData();');
 
         postData.params.forEach(param => {
@@ -74,6 +82,11 @@ export const fetch: Client<FetchOptions> = {
         }
     }
 
+    // If we ultimately don't have any headers to send then we shouldn't add an empty object into the request options.
+    if (options.headers && !Object.keys(options.headers).length) {
+      delete options.headers;
+    }
+
     push(
       `const options = ${stringifyObject(options, {
         indent: opts.indent,

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

@@ -2,10 +2,7 @@ const form = new FormData();
 form.append('foo', 'Hello World');
 form.append('bar', 'Bonjour le monde');
 
-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 = {
@@ -63,6 +64,13 @@ export const fetch: Client = {
           break;
         }
 
+        // 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.
+        // eslint-disable-next-line no-case-declarations -- We're only using `contentTypeHeader` within this block.
+        const contentTypeHeader = getHeaderName(headersObj, 'content-type');
+        if (contentTypeHeader) {
+          delete headersObj[contentTypeHeader];
+        }
+
         unshift("const FormData = require('form-data');");
         push('const formData = new FormData();');
         blank();
@@ -102,6 +110,11 @@ export const fetch: Client = {
     push(`let url = '${url}';`);
     blank();
 
+    // If we ultimately don't have any headers to send then we shouldn't add an empty object into the request options.
+    if (reqOpts.headers && !Object.keys(reqOpts.headers).length) {
+      delete reqOpts.headers;
+    }
+
     const stringifiedOptions = stringifyObject(reqOpts, { indent: '  ', inlineCharacterLimit: 80 });
     push(`let options = ${stringifiedOptions};`);
     blank();

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

@@ -8,10 +8,7 @@ formData.append('bar', 'Bonjour le monde');
 
 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;