javascript fetch로 form 데이터 보내기

인터넷 검색했을때는 아래처럼 json 방식으로 보내는것만 나왔다.

<script>
    document.querySelector("#todoWrite").addEventListener("click", (e) => {
        e.preventDefault();
        const todoItem = document.querySelector("#todoItem").value;
        const todoDate = document.querySelector("#todoDate").value;

        fetch("/add", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                todoItem: todoItem,
                todoDate: todoDate,
            }),
        }).then((res) => console.log(res));
    })
</script>

하지만 node.js에서는... 아무리해봐도 데이터가 안오는거다.

 

app.post('/add', (req, res) => {
    let {todoItem, todoDate} = req.body;
    console.log('req:', req.body);

    let id = 0;
    db.collection('counter').findOne({name:'totalPost'}, (err, data) =>{
        id = (data.totalPost + 1);

        db.collection('post').insertOne(
            {
                _id:id,
                subject: todoItem,
                date: todoDate,
            },
            () => {
                db.collection('counter').updateOne({name:'totalPost'}, { $set:{totalPost:id} }, (err2, data2) => {
                    if(err2) console.log(err2);
                });
            });
    });

    res.send('전송완료~');
});

응 데이터 안와~

<script>
    document.querySelector("#todoWrite").addEventListener("click", (e) => {
        e.preventDefault();
        const todoItem = document.querySelector("#todoItem").value;
        const todoDate = document.querySelector("#todoDate").value;

        fetch("/add", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body: new URLSearchParams({
                todoItem: todoItem,
                todoDate: todoDate,
            })
        }).then((res) => console.log('res:',res));
    })
</script>

그러다 우연히 검색하여 위 처럼 Content-Type를 x-www-form-urlencoded로 바꾸고

body에 데이터도 json 형식이 아니라 URLSearchParams으로 하니 성공!!