Geting an AxiosError of request failed with status code 500

Question

Hello guys I'm building a simple task manager app and while trying to post data from the front page I got an AxiosError of request failed with status code 500. However, when I make the same post request in postman it works fine. Below is my code

import axios from 'axios'
import React, {useState} from 'react'
import { Checkbox, Icon } from '@chakra-ui/react'
import {Text, Container, VStack, FormControl, Input, Button, InputGroup, Box, Grid, GridItem } from '@chakra-ui/react'
import { AiFillDelete } from 'react-icons/ai';
import {FiEdit} from 'react-icons/fi'
import {GrCheckbox, GrCheckboxSelected} from 'react-icons/gr'
import TaskBox from '../Components/taskBox';
import {useToast} from '@chakra-ui/react'

const Task = ()=>{
    const [loading, setLoading] = useState(false)
    const [taskName, setTaskName] =useState('')
    const toast = useToast()
    async function handleSubmitTask(){
        try {
            const config = {
                header: {
                    "Content-type": "application/json",
                },
            }
            const {data} = await axios.post("/api/tasks", {taskName}, config)
            
        } catch (err) {
            setLoading(false)
            console.log(err);
        }
        setLoading(false)
    }
    return(
        <header>
            <section className="container">
                <VStack spacing={'2.5rem'} className="box-heading" borderRadius={'.3rem'}>
                    <Text fontSize={'3xl'}>Task Manager</Text>
                    <FormControl display={'flex'} flexDir={'column'} gap={'1rem'}>
                        <Input 
                            type='text'
                            id='task'
                            placeholder='Enter Task'
                            onChange={(e)=> setTaskName(e.target.value)}
                        />
                        <Button bg={'blue.500'} color={'white'} fontSize={'1rem'} justifySelf={'end'} className='addTask' onClick={handleSubmitTask} isLoading={loading}>
                            Add Task
                        </Button>
                    </FormControl>
                </VStack>
                <article className="box-list">
                    <TaskBox />
                </article>
            </section>
        </header>
    )
}
export default Task```

Answer 1

header should be in plural form and Content-type should be with a capital T:

const config = {
    headers: {
            "Content-Type": "application/json",
        },
    }