Description

I found a very nasty problem. My setup is Nuxt 4 + Pinia Colada + hey-api (OFetch client).

The problem is that when I try to send FormData via mutation, the server does not accept my data. I looked through DevTools and noticed that the browser also does not recognise the fields. Then I saw that the boundary in the body differs from what is specified in the header.

0 elements

But data exists

Boundary in data: ------WebKitFormBoundaryHRt3DKXSmP8i3iGUC

Boundary in Content-Type: ----WebKitFormBoundaryPCThZm1eMu4oGHXn

I discovered where things are not going well. The problem in file client/client.get.ts. This part of code:

    // create Request before network to run middleware consistently
    const networkBody = initialNetworkBody;
    const requestInit: ReqInit = {
      body: networkBody,
      headers: opts.headers as Headers,
      method: opts.method,
      redirect: 'follow',
      signal: opts.signal,
    };
    let request = new Request(url, requestInit);

    request = await applyRequestInterceptors(request, opts);
    const finalUrl = request.url;

    // build ofetch options and perform the request (.raw keeps the Response)
    const responseOptions = buildNetworkOptions(
      opts as ResolvedRequestOptions,
      networkBody,
      ofetchResponseType,
    );

    let response = await $ofetch.raw(finalUrl, responseOptions);

Here you can see that a new Request is created in order to apply interceptors. This Request contains a body with FormData. Next step in applyRequestInterceptors:

  // apply request interceptors and mirror header/method/signal back to opts
  const applyRequestInterceptors = async (
    request: Request,
    opts: ResolvedRequestOptions,
  ) => {
    for (const fn of interceptors.request.fns) {
      if (fn) {
        request = await fn(request, opts);
      }
    }
    // reflect interceptor changes into opts used by the network layer
    opts.headers = request.headers;
    opts.method = request.method as Uppercase<HttpMethod>;
    // ignore request.body changes to avoid turning serialized bodies into streams
    // body comes only from getValidRequestBody(options)
    // reflect signal if present
    opts.signal = (request as any).signal as AbortSignal | undefined;
    return request;
  };

The most important thing here is that the headers from the request end up in the headers of the ofetch opts. That is where the fake boundary is inserted.
The situation is as follows: Request prepares the request and already sets its boundary in the body sent to it. Then it goes into the headers of the OFetch request. Under the hood, Fetch does the same thing as Request. But it does not set its header, since Content-Type is already set.

A quick check showed that Request had indeed prepared the body for sending:

// example piece of code

const data = new FormData()

data.append("key1", "value1")
data.append("key2", "value2")

for (const [key, value] of data.entries()) {
    console.log(key, value)
}

const req = new Request("https://jsonplaceholder.typicode.com/todos/1", {
    body: data,
    method: 'POST'
})

console.log(req)
console.log(req.headers.get('Content-Type'))
const reader = req.body.getReader()

const decoder = new TextDecoder('utf-8')
let result = ''

while (true) {
    const { done, value } = await reader.read()

    if (done) {
        break
    }

    if (value) {
        result += decoder.decode(value, { stream: true })
    }
}

result += decoder.decode()

console.log(result)

Output:

Reproducible example or configuration

https://github.com/holy-filipp/heyapi-bug-report

I'm not providing the backend here, it works fine as it is. (you can see request in devtools)

OpenAPI specification (optional)

api-docs.json file in repo

System information (optional)

No response