前端react axios 发送post请求fastapi响应报错422 (Unprocessable Entity)(react的前端)

前端react axios 发送post请求fastapi响应报错422 (Unprocessable Entity) post请求fastapi响应报错:422 (Unprocessable Entity)

推荐整理分享前端react axios 发送post请求fastapi响应报错422 (Unprocessable Entity)(react的前端)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端开发 react,react前端启动,前端开发 react,react前后端交互,前端react项目,react api,react的前端,react api,内容如对您有帮助，希望把文章链接给更多的朋友！

最近在学习和使用fastapi的时候遇到了一个问题,就是发送了post请求后服务器端回应:422 (Unprocessable Entity), 具体含义:

HTTP 422 状态码表示服务器理解请求实体的内容类型，并且请求实体的语法是正确的，但是服务器无法处理所包含的指令。422 表现为请求格式错误，但出现了语义错误，以至于服务端无法响应。

fastapi出现这种响应错误,有时候可能会是前端也有可能是后端造成的,这个错误可以理解为:请求的数据前后端的类型不一样.

演示代码

这里的演示代码,前端发送请求使用的是axios,服务器为fastapi. 先看出现422错误的代码:

fastapi:

@app.post("/apipost/")async def posttest(s): return s

axios:

axios.post(baseURL + '/apipost',{ s: 'post test' }, ).then(function (res) { console.log(res.data) }).catch(function (error) { console.log(error.response) })

点击按钮发送请求后出现POST http://localhost:8000/apipost/ 422 (Unprocessable Entity)错误.

分析错误

前边我们说了这个错误可以理解为:请求的数据前后端的类型不一样.,我们看看数据哪里不一样了? axios发送的数据:s: 'post test' fastapi需要接收的数据:s,对!就是一个s!昂?好像明白了哪里出问题,后端没定义接收数据的类型.因为前端发来的是一个str,我们修改一下后的s的类型试试.

前端不变,把后端代码修改:

@app.post("/apipost/")async def posttest(s:str): return s

发送请求,依然报错422! 服务器响应:{"detail":[{"loc":["query","s"],"msg":"field required","type":"value_error.missing"}]}

这个意思是这个字段的数据必填,现在缺失中!很多时候到这里我们就开始搜索百度、csdn等寻找答案,大多都说是header设置有问题格式不对等等,后来我查寻了官方的文档,发现这个错误其实解决起来很简单的,只要使用 Pydantic 模型来