Axios sends boundary text even when form data is empty

[JunichiIto]

Describe the bug

Axios sends boundary text even when form data is empty:

$(function() {
  $('.hi-button').click(function() {
    const formData = new FormData();
    // formData contents are dynamically created. Sometimes it can be empty.
    // if (someCondition()) {
    //   formData.append("key1", "value1");
    // }
    axios.post('/hello', formData).then((response) => {
      $('.message').show();
    })
  })
});

But such a form data seems to be invalid and causes error for Rails application.

To Reproduce

I created a repro app and described here:
rails/rails#51292

Code snippet

No response

Expected behavior

When form data is empty, axios should not send form data at all or send valid form data.

Please see also: rails/rails#51292

Axios Version

0.28.0

Adapter Version

No response

Browser

Chrome

Browser Version

Version 122.0.6261.112 (Official Build) (arm64)

Node.js Version

No response

OS

macOS 14.4

Additional Library Versions

No response

Additional context/Screenshots

No response

[DigitalBrainJS]

It doesn't seem like this is an Axios issue. I've never seen this behavior in RFC or issues related to this. But in any case, this is exactly how the browsers’ network API acts (fetch&XMLHttpRequest), so it looks like Rails will have problems with communication with the frontend. Axios for the browser relies entirely on the browser API to work with FormData, it does not have its own FormData encoder, unlike Axios for Node.js. However, it implements the same behavior.

await (await fetch('https://httpbin.org/post', {method: 'post', body: new FormData()})).json()

POST / HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Content-Length: 44
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua: "Chromium";v="122", "Not(A:Brand";v="24", "Google Chrome";v="122"
sec-ch-ua-platform: "Windows"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryvXB63Fbymccy21ky
Accept: */*
Origin: https://axios-http.com
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: uk,uk-UA;q=0.9,en-US;q=0.8,en;q=0.7,ru-UA;q=0.6,ru-RU;q=0.5,ru;q=0.4

------WebKitFormBoundaryvXB63Fbymccy21ky--

[JoeDupuis]

Interesting. I agree, this is not an Axios issue and we can close this ticket.
That being said, the RFC is pretty clear:

The body must then contain
one or more body parts, each preceded by a boundary delimiter line,
and the last one followed by a closing boundary delimiter line.

This is from the old rfc2046 pointed as the source of truth for the definition of multipart form data in the current rfc7578

This suggest that Rack (therefore Rails) follows the spec, but perhaps a bit too rigidly. The spec does warn against being too rigid in regard to field names for example.

Seems like it would fall on the browser to not send this request (or make it valid somehow), but I feel like the spec is overly restrictive here and should allow for an empty body (with a final boundary).

I'll start a discussion in the Rack issue tracker. Perhaps they'd be open to relax the parsing a bit.

[JunichiIto]

@DigitalBrainJS and @JoeDupuis , thank you for your responses. Joe kindly found out how to fix this issue. So I close this issue.