Axios抛出“JSON输入意外结束”错误,与Next.JS 13.2 POST调用中的获取相反

rt4zxlrg  于 2023-03-18  发布在  iOS
关注(0)|答案(1)|浏览(197)

我已经对此进行了相当多的研究,但我仍然对这里发生的事情感到困惑。我有两个函数,每个本质上是相同的;在我的API中调用POST方法。但是,AXIOS抛出“JSON输入意外结束”错误,而Fetch没有。使用AXIOS或Fetch时,API调用没有变化。
奇怪的是,GET请求在AXIOS中运行良好,还应该注意的是,在使用AXIOS调用时,我得到了一个“readablestream { locked:假,说明:“可读”,支持对象:false}“。这让我又陷入了另一个兔子洞。
想看看有没有其他人有什么见解?
前端:

// AXIOS 
    function handleSubmit(event) {
        event.preventDefault();

        var newBlog = {
            title: title,
            content: content,
        }

        axios.post('/api/blogs', JSON.stringify(newBlog))
        .then(response => {
            console.log(response.data);
        }).catch(error => {
            console.log(error);
        });
           
        // A different attempt at calling the POST method.
        // axios({
        //     url: '/api/blogs',
        //     method: "POST",
        //     headers: {
        //         "content-type": "application/json",
        //     },
        //     body: JSON.stringify({
        //         title: title,
        //         content: content,
        //     }),
        // }).then(response => {
        //     console.log(response.data);
        // }).catch(error => {
        //     console.log(error.data);
        // });
    }
// FETCH 
    async function handleSubmit2() {
        const postData = {
            method: "POST",
            headers: {
                "content-type": "application/json",
            },
            body: JSON.stringify({
                title: title,
                content: content,
            }),
        };
        const res = await fetch(`/api/blogs`, postData);
        const response = await res
        if (response.response.message !== "success") return;
    }

后端:

export async function POST(req, res) {
    try {

        // In axios, this is where "SyntaxError: Unexpected end of JSON input" occurs.
        const { title, content } = await req.json()

        const result = await executeQuery({ query: "INSERT INTO blogs (title, content, date) VALUES (?, ?, ?)", values: [title, content, new Date()] });

        const formattedResults = JSON.stringify(result);
        console.log(formattedResults)
        return formattedResults;
    } catch (error) {
        console.error("Error on create blog:", error);
        return false // res.status(500).send(formattedResults);
    }
}

db.jsx(executeQuery所在的位置)

import mysql from 'serverless-mysql';

const db = mysql({
    config: {
        host: process.env.DBHOST,
        port: process.env.DBPORT,
        database: process.env.DB,
        user: process.env.DBUSER,
        password: process.env.DBPASS
    }
});
export default async function executeQuery({ query, values }) {
    try {
        const results = await db.query(query, values);
        await db.end();
        return results;
    } catch (error) {
        return { error };
    }
}

在使用AXIOS调用时,我已经尝试过将.json()改为.text()。除此之外,我还尝试了多次小迭代,试图让它相应地工作。但我已经偏离太远了,我想我应该问一下。

epggiuax

epggiuax1#

根据axios文档:https://axios-http.com/docs/post_example,当你发出一个发布请求时,你不需要在有效负载上使用JSON。stringify yourself. Axios会为你做这件事。这里的问题可能是你的请求正文目前正在被“双字符串化”(一次是你,一次是Axios。)所以尝试这样发出你的请求:

axios.post('/api/blogs', newBlog)

相关问题