简书显示服务器错误,POST请求常见错误及解决办法

前后端分离已经是web开发的主流,在前后端对接的过程中难免会碰到各式各样的问题,本文对近期项目中遇到的与POST请求有关的问题做了一个简要的汇总和分析,并列出了与之相关的解决办法。

【🐛问题一】POST请求发生服务器500错误

🐱‍💻问题描述 一次调用POST请求过程中,接口报500错误,接口错误属于服务器内部错误,原以为是后台的接口有问题,立马将500问题向后台反馈,然而后台却告知接口测试正常。看来问题的根源在前端,我仔细看了看代码之后发现,原来是自己在发起POST请求时忘记提交参数。

✨解决办法 完善请求参数

【🐛问题二】POST请求发生405错误

🐱‍💻问题描述

发起POST请求,控制台反馈405 Method Not Allowed405错误提示如图:

5d298bbb138ec04c1fe3441d6fd787a4.png

✨解决办法 错误原因比较直接,是用错了method方法 将method由GET改成POST即可 总结

不是所有问题都是代码或者接口导致,有时候从自身找问题才是最好的解决办法

【🐛问题三】前端POST请求成功,后台却获取不到数据

🐱‍💻问题描述 近期基于UNI-APP提供的uni.request()方法封装了一个简易的拦截器,在之前的项目中不管是POST还是GET都能正常使用,但最近的一个项目中却发生了GET请求正常,POST请求后台无法获取到数据的问题由于之前的成功经历,让我直接忽略了请求配置的问题,而是从其它方面思考问题发生的原因。比如

检查参数及格式是否有问题(毕竟吃过一次亏)

将参数使用JSON.stringfy进行格式化

将method设置为get (显然不对,后台接口明显要求是POST)

经过一番尝试之后最终定位问题是Content-Type设置不正确所致。

✨解决办法 将请求头的Content-Type属性设置为'application/x-www-form-urlencoded'

uni.request()默认Content-Type 为"application/json",设置前后的Content-Type分别见下图:

82ba5b4148f0ef4ac890490bb17a8ba2.png

776eaf39753e3c1e1e8fcab416aec9bf.png

总结

不要过于相信过去成功的经验!!!

关于POST与Content-Type更加详细的说明,可参阅

🚀POST与Content-Type常见类型 【🐛问题四】POST请求后台提示参数格式不正确

🐱‍💻问题描述

问题四发生在Vue+axios项目中,项目中使用get请求一切正常,使用POST请求却一直提示参数格式不正确,一开始还以为是和【问题三】一样是由于Content-Type配置不正确导致,结果将Content-Type换了个遍也没有解决问题。最终依靠万能度娘解决

✨解决办法

使用qs格式化POST请求参数 > 1. npm install qs --save //安装qs> 2. import QS from 'qs' //引用qs> 3. QS.stringfy(data) //事情stringfy方法格式化参数 🚀详细说明可参阅axios与qs 总结 有问题多百度,沉舟侧畔千帆过,你遇到的坑可能已经被人填了无数遍了,百度、CSDN都能搜索到非常多的资源!

写在后面

上面描述的4个有关POST请求的问题都是近期在前后端项目对接中真实遇到的,趁此机会对其作了一个总结,文中虽然没有深入去讲解其错误原因和解决原理,但都给出了相应的文章链接。 欢迎大家关注微信公众号 : 🚀 前端牧码人 学前端,做快乐牧码人

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值