[Vercel/SvelteKit] fetch unexpected behavior with method POST

[hewliyang]

Running the following form action on the dev server works totally fine, but when I deploy my app to Vercel it fails.

export const actions = {
	default: async ({ request, fetch }) => {
		const formData = await request.formData();
		
		const data = {
			name: formData.get("name"),
			... // details omitted
		};
		
		async function createEvent() {
			const resp = await fetch(API_ENDPOINT + "volunteers/", {
				method: "POST",
				body: JSON.stringify(data),
			});

			if (!resp.ok) {
				throw new Error("Check that the API server is running!");
			}

			const volunteer = (await resp.json()) as Volunteer;

			return volunteer.id;
		}

		const id = await createEvent();
		redirect(303, `/volunteer/{id}`);
	},
};

For context, it's POST-ing to a Django backend hosted on fly.io. In the logs, the Django server shows 422 Unprocessable Entity, meaning the request body could not even be parsed. I inspected the request via browser and it looks like both requests (dev & Vercel) had the exact same body.

Switching to Axios solved the problem.

export const actions = {
	default: async ({ request, fetch }) => {
		const formData = await request.formData();

		const data = {
			name: formData.get("name"),
			...  // details omitted
		};

		async function createEvent() {
			try {
				const resp = await axios.post(API_ENDPOINT + "volunteers/", data);
				const volunteer = resp.data as Volunteer;
				return volunteer.id;
			} catch (err) {
				throw new Error("Check that the API server is running!");
			}
		}

		const id = await createEvent();
		redirect(303, `/volunteer/{id}`);
	},
};

Am I missing something obvious? Why did regular fetch work locally but not on Vercel in this case?

[eltigerchino]

Maybe it requires specifying the content-type?

			const resp = await fetch(API_ENDPOINT + "volunteers/", {
				method: "POST",
				body: JSON.stringify(data),
+              headers: {
+                'content-type': 'application/json'
+              }
			});