Can't make POST request in server action using fetch api

[idotalmor]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/vercel-next-js-reproduction-template-go8s7s?file=%2Fapp%2Fpage.tsx%3A5%2C1

To Reproduce

When creating a simple post request using fetch API in server action i get an error. When running the app locally everything works as expected.

the code (inside server function):

    const postData = {
        user_id: "user_id",
        some_data: "organization_name"
    };
    const jsonString = JSON.stringify(postData);

    const headers: Headers = new Headers({
        'Content-Type': 'application/json',
    });
    const res = await fetch(`${apiBaseUrl}/foo/create`, {
        method: 'POST',
        headers: headers,
        body: jsonString,
        cache: "no-cache"
    },)

The error: Caught an Error: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11730:11) at async globalThis.fetch (/var/task/.next/server/chunks/638.js:1:36426) at async n (/var/task/.next/server/app/(no-layout)/dashboard/profile/link-organization/page.js:1:11401) at async /var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:406 at async rg (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:15:6309) at async rz (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:24709) at async Y (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:25417) at async Q.responseCache.get.routeKind (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:1025) at async r3.renderToResponseWithComponentsImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:507) at async r3.renderPageComponent (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:4780) { cause: RequestContentLengthMismatchError: Request body length does not match content-length header at AsyncWriter.end (node:internal/deps/undici/undici:9128:19) at writeIterable (node:internal/deps/undici/undici:9032:16) { code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH' } } Caught an Error: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11730:11) at async globalThis.fetch (/var/task/.next/server/chunks/638.js:1:36426) at async n (/var/task/.next/server/app/(no-layout)/dashboard/profile/link-organization/page.js:1:11401) at async /var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:406 at async rg (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:15:6309) at async rz (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:24709) at async Y (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:25417) at async Q.responseCache.get.routeKind (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:1025) at async r3.renderToResponseWithComponentsImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:507) at async r3.renderPageComponent (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:4780) Caught an Error: RequestContentLengthMismatchError: Request body length does not match content-length header at AsyncWriter.end (node:internal/deps/undici/undici:9128:19) at writeIterable (node:internal/deps/undici/undici:9032:16) { code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH' }

Current vs. Expected behavior

The anticipated outcome is to successfully execute the POST request.

How was this achieved? By transitioning to the Axios library for crafting the request, instead of utilizing the Fetch API. The following article provided invaluable insights: Next.js Fails with UND_ERR_REQ_CONTENT_LENGTH_MISMATCH After Redirect from Server.

The article references an issue, which, despite being closed, I still encountered in the latest stable version.

Provide environment information

im storing the nextjs app in vercel, the issue occurs in both 14.1.0 & 14.1.2 version

Which area(s) are affected? (Select all that apply)

Data fetching (gS(S)P, getInitialProps)

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

I tested this issue agains 14.1.0 && 14.1.2 versions.

_NEXT-3300

[MH4GF]

• related: https://github.com/vercel/next.js/discussions/62918

[jacobtt21]

was this ever fixed?

[devjiwonchoi]

Hi, the sandbox seems a default template, can you provide a valid repro?

[type-wolf]

Troubling situations that occur outside the GET method Temporarily addressed.

1. undici -> node-fetch

   npm install node-fetch

2. 
   'use server';

import fetch from 'node-fetch';

async function postData() { const postData = { user_id: "user_id", some_data: "organization_name" }; const jsonString = JSON.stringify(postData); const headers: Headers = new Headers({ 'Content-Type': 'application/json' }); const res = await fetch(${apiBaseUrl}/foo/create, { method: 'POST', headers: headers, body: jsonString, cache: "no-cache" }) }

[wuzhuzhu]

+1, post fetch inside a server action will cause: UND_ERR_REQ_CONTENT_LENGTH_MISMATCH

[jsaunders92]

Did you fix this? Is the content-length header being sent with your request?