fix: http content headers not sent when using axios (#8064)

Co-authored-by: Mark Anderson <mark.anderson@outsystems.com>
Co-authored-by: jcesarmobile <jcesarmobile@gmail.com>

Author: 3 people

android/capacitor/src/main/assets/native-bridge.js

@@ -123,9 +123,8 @@ var nativeBridge = (function (exports) {
             };
         }
         else if (body instanceof FormData) {
-            const formData = await convertFormData(body);
             return {
-                data: formData,
+                data: await convertFormData(body),
                 type: 'formData',
             };
         }
@@ -657,7 +656,12 @@ var nativeBridge = (function (exports) {
                                     },
                                 });
                                 convertBody(body).then(({ data, type, headers }) => {
-                                    const otherHeaders = this._headers != null && Object.keys(this._headers).length > 0 ? this._headers : undefined;
+                                    let otherHeaders = this._headers != null && Object.keys(this._headers).length > 0 ? this._headers : undefined;
+                                    if (body instanceof FormData) {
+                                        if (!this._headers['Content-Type'] && !this._headers['content-type']) {
+                                            otherHeaders = Object.assign(Object.assign({}, otherHeaders), { 'Content-Type': `multipart/form-data; boundary=----WebKitFormBoundary${Math.random().toString(36).substring(2, 15)}` });
+                                        }
+                                    }
                                     // intercept request & pass to the bridge
                                     cap
                                         .nativePromise('CapacitorHttp', 'request', {

core/native-bridge.ts

@@ -106,9 +106,8 @@ const convertBody = async (
       type: 'text',
     };
   } else if (body instanceof FormData) {
-    const formData = await convertFormData(body);
     return {
-      data: formData,
+      data: await convertFormData(body),
       type: 'formData',
     };
   } else if (body instanceof File) {
@@ -323,7 +322,6 @@ const initBridge = (w: any): void => {
         const tagStyles = success
           ? 'font-style: italic; font-weight: lighter; color: gray'
           : 'font-style: italic; font-weight: lighter; color: red';
-
         c.groupCollapsed(
           '%cresult %c' + result.pluginId + '.' + result.methodName + ' (#' + result.callbackId + ')',
           tagStyles,
@@ -611,7 +609,6 @@ const initBridge = (w: any): void => {
 
         window.XMLHttpRequest = function () {
           const xhr = new win.CapacitorWebXMLHttpRequest.constructor();
-
           Object.defineProperties(xhr, {
             _headers: {
               value: {},
@@ -726,9 +723,18 @@ const initBridge = (w: any): void => {
               });
 
               convertBody(body).then(({ data, type, headers }) => {
-                const otherHeaders =
+                let otherHeaders =
                   this._headers != null && Object.keys(this._headers).length > 0 ? this._headers : undefined;
 
+                if (body instanceof FormData) {
+                  if (!this._headers['Content-Type'] && !this._headers['content-type']) {
+                    otherHeaders = {
+                      ...otherHeaders,
+                      'Content-Type': `multipart/form-data; boundary=----WebKitFormBoundary${Math.random().toString(36).substring(2, 15)}`,
+                    };
+                  }
+                }
+
                 // intercept request & pass to the bridge
                 cap
                   .nativePromise('CapacitorHttp', 'request', {

ios/Capacitor/Capacitor/assets/native-bridge.js

@@ -123,9 +123,8 @@ var nativeBridge = (function (exports) {
             };
         }
         else if (body instanceof FormData) {
-            const formData = await convertFormData(body);
             return {
-                data: formData,
+                data: await convertFormData(body),
                 type: 'formData',
             };
         }
@@ -657,7 +656,12 @@ var nativeBridge = (function (exports) {
                                     },
                                 });
                                 convertBody(body).then(({ data, type, headers }) => {
-                                    const otherHeaders = this._headers != null && Object.keys(this._headers).length > 0 ? this._headers : undefined;
+                                    let otherHeaders = this._headers != null && Object.keys(this._headers).length > 0 ? this._headers : undefined;
+                                    if (body instanceof FormData) {
+                                        if (!this._headers['Content-Type'] && !this._headers['content-type']) {
+                                            otherHeaders = Object.assign(Object.assign({}, otherHeaders), { 'Content-Type': `multipart/form-data; boundary=----WebKitFormBoundary${Math.random().toString(36).substring(2, 15)}` });
+                                        }
+                                    }
                                     // intercept request & pass to the bridge
                                     cap
                                         .nativePromise('CapacitorHttp', 'request', {