该应用程序是在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')
})
1条答案
按热度按时间5q4ezhmt1#
表单操作是通过HTML表单向服务器'/'的根目录提交一个post请求,并且您还通过axios向看起来正确的URL发送一个post请求。您可以删除表单并防止它执行此操作。所以它看起来像这样
如果需要,您也可以保留表单,但需要防止默认的提交行为。