本文共 1179 字，大约阅读时间需要 3 分钟。

Dayone

常见问题

1，登录时，填写错误的用户名和密码，没有错误提示（没有进入catch分支）

以下两种情况下axios会主动抛出错误：

（1）如果本次请求得到的响应状态码不是2开头的，比如:（400,500）

（2）如果本次请求出现网络错误，比如:（断网，超时）

当我们提供错误的用户名和密码的时，还是能从服务器获得到的数据，这个过程一般有以下两个特点：

（1）本次网络请求的状态码都是正常的（但是：success字段是false

（2）没有出现网络错误

所以axios并不会主动报错，如下图所示：

解决方案：可以在相应拦截器中，根据本次返回的数据中的success字段值，来确认是否主动抛出错误。如下图所示：

2，获取ajax的返回结果比较麻烦：res.data.data.XXXX

 观察api返回的结果，我们可以发现axios在处理接口返回值的时候，默认会自动给包裹一个data字段，这导致我们每次在业务模块获取数据都要写res.data.data.XXXX

解决方案： 在返回有效数据的时候，直接res.data进行脱壳。

 3,环境变量-端口配置

环境变量：不同的环境下，取到不同的值。

开发环境下服务环境端口在vue.config.js中，如下图

 环境变量的配置文件有以下几种：

 在项目运行的过程中，通过不同的命令，能够自动加载不同的配置文件，从而获取不同的环境变量。

定义环境变量

格式：key=value，key表示环境变量的名称，value表示环境变量的值

以VUE_APP_开头的变量将通过webpack.DefinePlugin静态的嵌入到客户端侧的代码中，建议自己定义的环境变量都以它来开头。

在.env.development开发环境配置文件中修改端口为8080

 定义好环境变量后，项目重新启动，他会自动集成到process.env这个属性中。

4，跨域-问题出现切换请求基地址到本地服务器

跨域：在A地址向B地址发起请求的时候，如果A地址和B地址在：协议，域名，端口号，这三个中只要有一个不一样，则说明请求是跨域的，跨域错误本质问题是出现在浏览器，而不是服务器端。

解决跨域问题的方法：

（1）前端用JSONP方式去发请求（JSONP不是ajax请求）

（2）后端来做(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错

（3）代理转发

代理转发解决跨域:在VUE.config.js配置文件中，有一项devServer，在里面添加以下代码

在.env.development开发环境配置文件中 设置环境变量VUE_APP_BASE_API = '/api'

在request.js文件中使用已经定义好的环境变量baseURL:process.env.VUE_APP_BASE_API 

以上操作完成后，将重启项目 。

转载地址：https://blog.csdn.net/weixin_69119939/article/details/125201371 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！