javascript - Content-Type var inte en av "multipart/form-data" eller "application/x-www-form-urlencoded"

Jag försöker bygga en statisk webbplats med Astro, men jag vill lägga till en komponent som tillåter en användare att registrera sig för ett nyhetsbrev via ett HTML-formulär. Enligt Astros guider använder jag en API-endpoint för att ta emot formulärdata och bearbeta logiken. Men när jag skickar formuläret får jag ett fel, Content-Type var inte en av "multipart/form-data" eller "application/x-www-form-urlencoded" när jag anropar await request.formData();. Såvitt jag kan se genom att titta på headers i förfrågan är det dock kodad som multipart/form-data:

Content-Type: multipart/form-data;boundary=---------------------------30448001245691757982165322994

Och nyttolasten:

-----------------------------30448001245691757982165322994
Content-Disposition: form-data; name="email"

[email 
-----------------------------30448001245691757982165322994--

API-slutpunktskoden (från Astrodokumentationen):

import type { APIRoute } from "astro";

export const POST: APIRoute = async ({ request }) => {
    const data = await request.formData(); // error is thrown here
    const email = data.get("email");
    
    // Validate the data - you'll probably want to do more than this
    if (!email) {
        return new Response(
            JSON.stringify({
                message: 'Missing required fields',
            }),
            { status: 400 }
        );
    }
    
    // Do something with the data, then return a success response
    return new Response(
        JSON.stringify({
            message: "Success!"
        }),
        { status: 200 }
    );
}

Och javascriptet för att skicka förfrågan:

const formData = new FormData(event.currentTarget as HTMLFormElement);

const response = await fetch("/api/newsletter", {
    method: "POST",
    body: formData,
});

const apidata = await response.json();

Svar #1

Problemet var med Astro som förrenderade API-endpointen. Eftersom jag hade Astro konfigurerat för output: hybrid, behövde jag uttryckligen tala om för Astro att inte förrendera API-endpointen.

Att lägga till export const prerender=false; högst upp i API-endpointkoden löste problemet.

Relaterade artiklar