AxiosError:NodeJs和ReactJS的网络错误

qyuhtwio  于 2023-06-22  发布在  iOS
关注(0)|答案(1)|浏览(166)

该应用程序是在React上创建的,并在另一个本地主机端口上与后端连接。
到目前为止,它可以获取数据,当我使用www.example.com http方法输入新数据时,它可以工作Axios.post。
我遇到的问题是,每次我提交一个新的条目,POST请求,Axios都会给我这个错误,即使数据确实提交和更新:

我已经用postman测试了端点,它返回了我想要的,只是一个回答:`res.json({ msg:'成功,试图修复挂起的HTTP Axios错误' })``
我复制下面的一些代码。React组分:

const AddToList = async (e) => {

    //define axios headers
    const headers = {
        Accept: 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
    }

    const newEntry = await axios.post("http://localhost:3001/addToList", { event: 'random test', finished: true }, { headers })
        .then((res) => {
            console.log(res)
        }).catch((err) => {
            console.log(err.response)
        })

}

export const Add = () => {

    const [items, setItems] = useState([])

    return (
        <div>
            <form action="/" >
                <input type="text" />
                <button type="submit" onClick={AddToList} > Add</button>
            </form>
        </div>
    )
}

处理请求的我的控制器:

addToList: async (req, res) => {

        let db = {}

        const data = await fsPromises.readFile('./Database/data.json').catch((err) => console.log('failed to read file ', err))

        const dbResult = await JSON.parse(data.toString())

        const newUser = {
            id: parseInt(dbResult.length) + 1,
            event: req.body.event,
            finished: req.body.finished,
        }

        var newList = await dbResult.push(newUser)

      
        var dataStringify = await JSON.stringify(dbResult)

        fs.writeFile('./Database/data.json', dataStringify, err => {
            if (err) throw err
            console.log("new data added")
        })

        res.json({ msg: 'success, trying to fix Pending HTTP Axios err' })
    }

服务器路由:

router.post('/addToList', indexController.addToList)

服务器索引,以防我可能丢失一些导入

const express = require('express')
const app = express()
const cors = require("cors")

app.use(express.json())
app.use(express.urlencoded({ extended: false }))

app.use(cors({
    origin: '*'
}))

var indexRouter = require('./routes/routes')

app.use("/", indexRouter)

app.listen('3001', (req, res) => {
    console.log('backEnd running port 3001')
})
5q4ezhmt

5q4ezhmt1#

表单操作是通过HTML表单向服务器'/'的根目录提交一个post请求,并且您还通过axios向看起来正确的URL发送一个post请求。您可以删除表单并防止它执行此操作。所以它看起来像这样

<div>
    <input type="text" />
    <button type="submit" onClick={AddToList}>Add</button>
  </div>

如果需要,您也可以保留表单,但需要防止默认的提交行为。

const AddToList = async (e) => {
  e.preventDefault();
  // rest of your code...
}

return (
  <div>
    <form onSubmit={addToList}>
      <input type="text" />
      <button type="submit">Add</button>
    </form>
  </div>
);

相关问题