网络请求异常问题

该篇文章记录总结一下，我在做前后端分离项目开发的过程中，所遇到的有关网络请求异常的前后端交互问题。（前端使用的是axios异步请求、后端使用fastAPI接口）

一、段落上传部分

最初报的错误如下图：

      当时查阅了很多的资料，跟着网上所说的解答逐个排查错误，但是都还是没有解决。像127.0.0.1改成localhost，检查headers中的数据类型，data里面的数据要根据后端设置的数据类型来修改，添加响应头，检查跨域设置等等方法都有尝试过。

并且还将自己的请求地址换成了axios官方网站里的测试接口地址，是有返回内容的。

以下是当时查阅资料，总结的可能导致该网络请求错误的原因：

1. 无法连接到服务器：可能因为服务器未启动、网络连接不稳定、DNS解析错误等；
2. 跨域问题：如果请求跨域了，并且服务器没有正确配置CORS（跨资源共享），浏览器会阻止请求，导致网络问题；
3. 代理配置问题；
4. 创建HTTP时未指定协议请求（' http:// ' 'https:// '）；
5. 制定了不正确的URL、端口或路径；
6. 请求格式不对；

查阅资料的过程中，还了解到了一些琐碎的知识点，虽然我没有解决问题，但是可能会有其他人的代码存在这种问题，就在此分享一下。

        前端向后端传输数据时，如果是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'

然后，我猜测可能是后端接口有些问题，与后端人员沟通协调，后端人员不断检查调错，然后前端控制台又报了其他错误。

可能出现错误的地方：

1. 代理出现错误；
2. 调用接口地址出错

检查了一下后端给的参数格式，传参应该放在url里，而我之前一直是放在了data里。

修改后：

至此，文本上传部分的网络请求问题就全部解决了。

二、文件上传部分

在项目中涉及到文件上传，使用的是ant-design的upload组件，当时也遇到了请求异常的问题。使用 Ant Design 的 Upload 组件时，可以通过 action 属性指定上传地址实现选择文件自动上传。

后端显示，第一次预检请求 200 OK（成功响应），但是正式请求却出现了400 的错误。

出现 400 错误（Bad Request）通常表示客户端发送了无效的请求到服务器，可能导致该网络请求错误的原因：

1. 请求体格式问题：对于 POST 请求，通常需要在请求中包含有效的请求体（body）。如果请求体格式不正确或缺失，服务器可能会返回 400 错误。

2. 参数传递问题：检查后端期望的参数传递方式。

3. 数据验证失败：如果在后端应用中使用了数据验证（例如 Pydantic 模型），并且请求数据不符合验证规则，也可能导致 400 错误，检查请求数据是否符合后端预期的格式和规则。

尝试了很多解决办法，最后将' Content-type '注释掉，结果不报错了，成功解决了问题。

总结

在前后端交互过程中，其实还遇到了很多问题，像500 ( Internal Server Error )等错误，较轻易地解决了，而以上总结的网络请求错误困扰了我很久，希望能帮到其他遇到同样错误的人吧。

在项目开发中，我深刻体会到了，实际情况不同，需要具体分析问题，拆解问题，想到各种可能导致该问题的原因，逐个排查，尝试各种可以解决问题的办法。

当然也有antd Upload自定义上传的方式，可以参考该文章https://blog.csdn.net/weixin_48074431/article/details/136079529?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-136079529-blog-103070931.235%5Ev43%5Epc_blog_bottom_relevance_base9&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-136079529-blog-103070931.235%5Ev43%5Epc_blog_bottom_relevance_base9

最后，如果文章内容有什么问题，可以私聊我提出，感谢！