该篇文章记录总结一下,我在做前后端分离项目开发的过程中,所遇到的有关网络请求异常的前后端交互问题。(前端使用的是axios异步请求、后端使用fastAPI接口)
一、段落上传部分
最初报的错误如下图:
当时查阅了很多的资料,跟着网上所说的解答逐个排查错误,但是都还是没有解决。像127.0.0.1改成localhost,检查headers中的数据类型,data里面的数据要根据后端设置的数据类型来修改,添加响应头,检查跨域设置等等方法都有尝试过。
并且还将自己的请求地址换成了axios官方网站里的测试接口地址,是有返回内容的。
以下是当时查阅资料,总结的可能导致该网络请求错误的原因:
- 无法连接到服务器:可能因为服务器未启动、网络连接不稳定、DNS解析错误等;
- 跨域问题:如果请求跨域了,并且服务器没有正确配置CORS(跨资源共享),浏览器会阻止请求,导致网络问题;
- 代理配置问题;
- 创建HTTP时未指定协议请求(' http:// ' 'https:// ');
- 制定了不正确的URL、端口或路径;
- 请求格式不对;
查阅资料的过程中,还了解到了一些琐碎的知识点,虽然我没有解决问题,但是可能会有其他人的代码存在这种问题,就在此分享一下。
前端向后端传输数据时,如果是get传输,直接传在url后;如果是post传输,则在请求体body中传输。在body中的数据格式又有两种,一种是 json 数据格式,另一种是 字符串。具体要用哪种格式取决于后端入参的格式
如果后端接收json数据类型,post 的 headers 需要设置{'content-type': 'application/ison' },传给后端的数据就形如{'name':'edward’,'age':'25'}
如果后端接收的是(表单)字符串类型,post 的 headers 需设置{'content-type': 'application/x-www-form-urlencoded'},传输给后端的数据就形如'name=edward&age=25'
然后,我猜测可能是后端接口有些问题,与后端人员沟通协调,后端人员不断检查调错,然后前端控制台又报了其他错误。
可能出现错误的地方:
- 代理出现错误;
- 调用接口地址出错
检查了一下后端给的参数格式,传参应该放在url里,而我之前一直是放在了data里。
修改后:
至此,文本上传部分的网络请求问题就全部解决了。
二、文件上传部分
在项目中涉及到文件上传,使用的是ant-design的upload组件,当时也遇到了请求异常的问题。使用 Ant Design 的 Upload 组件时,可以通过 action 属性指定上传地址实现选择文件自动上传。
后端显示,第一次预检请求 200 OK(成功响应),但是正式请求却出现了400 的错误。
出现 400 错误(Bad Request)通常表示客户端发送了无效的请求到服务器,可能导致该网络请求错误的原因:
请求体格式问题:对于 POST 请求,通常需要在请求中包含有效的请求体(body)。如果请求体格式不正确或缺失,服务器可能会返回 400 错误。
参数传递问题:检查后端期望的参数传递方式。
数据验证失败:如果在后端应用中使用了数据验证(例如 Pydantic 模型),并且请求数据不符合验证规则,也可能导致 400 错误,检查请求数据是否符合后端预期的格式和规则。
尝试了很多解决办法,最后将' Content-type '注释掉,结果不报错了,成功解决了问题。
总结
在前后端交互过程中,其实还遇到了很多问题,像500 ( Internal Server Error )等错误,较轻易地解决了,而以上总结的网络请求错误困扰了我很久,希望能帮到其他遇到同样错误的人吧。
在项目开发中,我深刻体会到了,实际情况不同,需要具体分析问题,拆解问题,想到各种可能导致该问题的原因,逐个排查,尝试各种可以解决问题的办法。
最后,如果文章内容有什么问题,可以私聊我提出,感谢!
标签:问题,请求,错误,上传,网络,blog,400,异常 From: https://blog.csdn.net/weixin_61164359/article/details/136762925