next.jstsx

The Content-Type does not change during the fetch request in NextJS


I'm trying to send a POST request to a remote Django API server, but I get an error because the Content-Type doesn't change in the request headers, even though I explicitly specified it.

Request Headers:

Content-Length: 23
Content-Type: text/plain;charset=UTF-8

My code:

async function onSubmit(data: z.infer<typeof FormSchema>) {
        try {
            const response = await fetch(apiEndpoint, {
                method: "POST",
                mode: "no-cors",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });

            if (response.ok) {
                console.log('Ok');
            }
        } catch (error) {
            console.error(error);
        }
    }

I tried to specify only Content-Type, also on the advice from a similar question, I set Content-Type together with Accept, but the header still doesn't change when requested


Solution

  • Remove mode: "no-cors" from your request. In short, no-cors does not allow the json content type.

    This answer for a similar question will fill you in as to why.