如何根据code码排查请求错误
同我的其他文章一样,都是自己项目中遇到的问题。一说到http的请求返回的code码。有很多优秀的文档,写了前因后果,如何解决,但是都是大,多是自己dome或者项目中遇到的问题,所以解决问题的过程很坎坷,尽管是一样的错误,但是解决方式又不一样,在这里我把自己的经理记录下来。当作留念了哈~
在HTTP1.1协议下,HTTP状态码总共可分为5大类:
1xx:请求收到,继续处理
2xx:操作成功收到,分析、接受
3xx:完成此请求必须进一步处理
4xx:请求包含一个错误无法或不能完成
5xx:服务器执行一个完全有效请求失败
先贴出一篇文章,讲得非常详细
来自于 【装满哈希的Map】的 HTTP协议网络请求状态码,详细~
注:所有的请求,在控制台仔细看!都会在里面找到线索的!下面我会把我的经历贴出来,其他同胞免受http code错误之苦
我们后台展示swagger-ui,软件是idea,语言是java。前后端分离。请求为axios
一般会有个测试接口,无需登录,验证,token,就可以交互的数据,下面是我的一个测试接口,拿到返回值是,男,女
如果说你一开始测试接口都报错的话,说明---------你写的接口不对啊,小老弟(当然不排除你们那个不靠谱的后端没有启动项目,所以请求之前先看看后台起动没有)
两种方法查看,1、登录他的后台接口ip页面,能访问就是启动了的。2、倒杯茶,揉一揉肩,让他赶紧起
下面是我自己随便起的一个后台,前台的请求的接口dome,测试用的是axios的cdn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button onclick="Inter()"> 点击请求</button>
<script>
function Inter() {
axios.get('http://192.168.1.111:8820/dict/gender')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
</script>
</body>
</html>
这里看到确实能用,那么就开整(如果是封装、加密什么的,就拿这部分测试就挺好 )
一、(Access-Control-Allow-Origin) 以下是请求分页数据接口地址。
Access to XMLHttpRequest at 'http://192.168.1.15:8820/cadre/listcadre?pageNo=1&pageSize=10' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
嗯!Access-Control-Allow-Origin
,大名顶顶的跨域错误~至于怎么跨域,我的上篇文章有分享,用vue内置vue.config.js Nginx代理跨域,作用就是伪装下请求的headers,
二、(code 404;timeout)
http://localhost:8081/api/login 404 (Not Found)
或者timeout ****
其实如果说404,或者timeout(超时)一定是接口地址没有写对,非常低级的错误了,但是还有可能是有其他原因
1、vue.vonfig.js 里面的proxy 的target
后台地址书写错误,所请求访问不到
2‘、axios的方法 请求地址书写错误
3、后台打了断点
4、后台压根儿没起动~
如果是以上地址都确认无误,请参考上篇 白屏的文章 可能是baseURL
,或者.env.production
的基础路径配置错误
三、(code 400)
POST http://localhost:8081/api/api/merchant/export 400 (Bad Request)
bed request
首先从控制台得出这是个坏请求。那么我是从以下几个方面看的。打开Network
- 下面发红的request 点开之后可以看到
以及request Payload
检查请求分为几个方面
-
日常检查是否接口地址是否错误
-
如果是get请求,
Request URL:
后面肯定有以"?"查询字符串的形式拼接的参数
如果是post请求,那么上面第二张图的Payload里面就是post携带参数,对比和后台的数据格式,数据名称是否有异同 -
Content-Type:
和后端要求是否一致
-
如果你确实使用的post方式,但是Payload没有出现你传的参数,可能是你封装的axios有问题哦,比如像我axios博文里面写到的(如下图),用qs模块把参数序列化
或者当时封装的时候参数并不是在后台想要位置
比以上get就是正常方式,而delete呢,是拼接在url后面,而download又是body里面,并且在里面加入了responseType
四、
Access to XMLHttpRequest at 'http://139.9.***.*/estate-admin-api/login.jsp;JSESSIONID=a2d98be3-f057-4f96-9728-bdeb39e4fff8' (redirected from 'http://localhost:8081/api/api/property/list?pageNo=1&pageSize=15') from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
和
http://139.9.***.*/estate-admin-api/login.jsp;JSESSIONID=a2d98be3-f057-4f96-9728-bdeb39e4fff8 net::ERR_FAILED
先挑简单看得懂的
1、Network Error ,网络错误,先看你本机有没有有网络,或者去后端的swagger-ui看看能不能访问,
2、'Access-Control-Allow-Origin' header
同源策略的请求头,如果你和我一样添加了请求拦截器,在里面塞了token(如下图)
那么我怀疑是token过期了,检查Application
里面的Session Storage(或者Local),果然没有,遂退出,重新登陆,ok!
五、code 401
- 这个是我在swagger测试的时候,会出现401 ,意思是无权限,就是未登录
六、(code 500)
Inter Server Error
或者Request failed with status 500
当出现500 的时候,一般会下意识的认为是后端语法问题,或者接口的问题。题主呢经历过大概有以下几个方面。
- 前端报错500,根据后台的idea,并没有日志,发现请求并没有走进去,进检查,前端的打包时候地址少了一个 / (通过日志确定方向,到底是前,还是后端的错误)
- 本身后台的java语法真的真的写错了。这就是自身的原因了,就是接口语法错误。(-.-!)
- 前端传值错误。其实这个也是因为后端的错误,比如常见的就是前端新增数据,为了图简便,个人电话没写,是个空的。但是等你请求展示个人信息,后台会对你的电话号码做处理(比如说只展示后四位),到时候,此时你新增数据的电话是空的,后台又没有做非空判断,所以造成后台空指针,java语言错误,报错500。(更据后端风格把,最好是前后端都做非空判断,能避免不少麻烦)
- 后台修改接口。这个比较容易疏忽。比如说现在个人信息有 【姓名】【年龄】,此时上线。上线后客户说应该新增【性别】一栏。于是后台返回性别字段。新增的数据有了【性别】字段,但是,原来的旧的测试数据没有【性别】字段,造成数据查询空指针。语法性错误,报错500 .(你发现更改字段,或者参数,自己去清空数据库,或者提示后端,毕竟直接给人说报错500找半天要好太多。。)