Skip to content

FormData requests crash on RN Android due to incorrect default Content-Type #10895

@akshayb03

Description

@akshayb03

Environment

  • axios version: 1.x
  • Platform: React Native Android
  • iOS: not affected

What happens

Calling axios(config) with a FormData body on React Native Android throws:

java.lang.IllegalArgumentException: multipart != application/x-www-form-urlencoded
at okhttp3.MultipartBody$Builder.setType(MultipartBody.kt:241)
at com.facebook.react.modules.network.NetworkingModule.constructMultipartBody(NetworkingModule.kt:697)
at com.facebook.react.modules.network.NetworkingModule.sendRequestInternal(NetworkingModule.kt:463)
at com.facebook.react.modules.network.NetworkingModule.sendRequest(NetworkingModule.kt:221)

The request never reaches the server. It fails locally inside React Native's NetworkingModule during multipart body construction.

Root cause

In dispatchRequest.js, axios sets a default Content-Type for POST/PUT/PATCH requests:

config.headers.setContentType('application/x-www-form-urlencoded', false);

Later, in resolveConfig.js, axios clears the Content-Type for FormData - but only for browser and Node.js environments:

if (utils.isFormData(data)) {
  if (platform.hasStandardBrowserEnv || platform.hasStandardBrowserWebWorkerEnv) {
    headers.setContentType(undefined); // browser handles it
  } else if (utils.isFunction(data.getHeaders)) {
    // Node.js form-data package
    setFormDataHeaders(headers, data.getHeaders(), own('formDataHeaderPolicy'));
  } 
}

As a result, the default application/x-www-form-urlencoded is never cleared for React Native FormData requests. That header reaches React Native's NetworkingModule, which then attempts to construct a multipart request using the incorrect content type, causing OkHttp to throw the error.

Current workaround

At our API layer, while making the request, adding the following block prevents axios from applying the default application/x-www-form-urlencoded header for FormData requests:

if (body instanceof FormData) {
  headers['Content-Type'] = false;
}

AxiosHeaders.set() guards against overwriting a false value, and AxiosHeaders.toJSON() drops false values before serializing headers. As a result, React Native's NetworkingModule receives no Content-Type header and correctly defaults to multipart/form-data.

Additional note

This issue affects the axios(config) request path directly and is independent of the recent postForm / patchForm helper fixes.

cc @jasonsaayman @DigitalBrainJS

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions