vue开发问题——根据http code码排除网络请求的故障，axios示例

如何一步一步排查网络请求无法请求到res回执

Lazy33

1513人浏览 · 2021-01-10 00:35:51

Lazy33 · 2021-01-10 00:35:51 发布

如何根据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找半天要好太多。。）