vue axios 网络状态status=401的时候，接收服务器返回的数据

已于 2022-04-25 10:27:58 修改
阅读量2.9k 收藏 6
点赞数 1
文章标签： vue.js
于 2022-04-25 10:26:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46613478/article/details/124398681
版权
当后端采用RESTful接口规范时，前端可能会收到如401等错误状态码，导致无法获取数据。这个问题源于axios默认忽略非200-300之间的状态码。为解决此问题，可以修改axios的库文件`settle.js`，在判断条件中增加对401状态码的接受，允许前端在401状态下仍能接收到服务器返回的数据。
摘要由CSDN通过智能技术生成

vue axios 网络状态status=401的时候，接收服务器返回的数据

问题描述： 后端使用restfull接口规范，这样就会有400，401，404等这样得状态码返回给前端，导致前端无法获取到服务器的数据了。
原因： axios 默认抛弃了 网络状态不在 [200, 300) 区间的服务器返回
解决： 修改axios的库文件，增加允许返回的判断

方案如下
库文件所在位置：node_modules/axios/lib/core/settle.js
在这里插入图片描述
第16行 原代码注释:

if (!response.status || !validateStatus ||validateStatus(response.status)){

增加如下代码

if (!response.status || !validateStatus || (validateStatus(response.status) || response.status === 401)){
jingjinglove-
关注
「Vue3系列」Vue3 Axios详解
日常笔记/总结/系列知识梳理
03-07 1702
这是响应体的结果，也就是服务器返回的数据。：这是生成此响应的请求，也就是 Axios 在发送请求时所创建的原生的 AJAX 请求对象。：这是响应的 HTTP 状态信息，是一个字符串，描述了状态码的含义，如 ‘OK’、‘Not Found’ 等。通过使用拦截器，你可以更加灵活地控制 Axios 的请求和响应处理流程，提高代码的可维护性和可扩展性。：这是响应的头信息，所有的 header 名称都是小写，可以使用方括号语法访问，例如。：这是 Axios 请求的配置信息，包括请求类型、请求的 URL、请求体等。
SpringBoot 2.x Vue Axios 跨域问题及401等异常处理
卜居老毛
06-22 8311
Vue + Axios 需要Api能够跨域调用，网上也是很多跨域的解决方法，比如重写 WebMvcConfigurationSupport 的addCrosMappings 方法，如： public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedO...
Request failed with status code 401 AxiosError: Request failed with status code 401
2301_76868945的博客
07-18 6553
发送请求时出现error:Request failed with status code 401。401考虑到token问题和token编译问题。发现"Basic"中没加空格。查看请求拦截代码,没问题。结果：可以正常发送请求。
Postman断言操作
学历是帮一个人争取机会 | 能力是帮一个人把握机会
12-04 452
Postman断言操作，接口测试最后一道关键操作
前端axios拿不到401的解决办法
Admans的专栏
06-27 2197
工具：elementplus。
解决vue axios的封装 请求状态的错误提示问题
10-17
然而，在实际应用中，可能会遇到各种错误情况，如网络错误、服务器错误状态码等。本文将详细讲解如何解决Vue与axios结合时，关于请求状态的错误提示问题。 首先，axios提供了拦截器（interceptors）功能，允许我们...
解决Vue axios post请求,后台获取不到数据的问题方法
10-18
总的来说，解决Vue axios POST请求后台获取不到数据的问题通常需要理解数据如何在前后端之间传输，并根据具体的数据结构选择合适的序列化和解析方法。同时，保持良好的沟通与合作，确保前端和后端的接口约定一致，也...
【vue】axios和vue-axios请求模块
早睡早起长头发的博客
08-19 1678
一、axios模块 二、axios使用方法 1.创建服务器端Express项目 2.创建服客户端Vite项目 3.在vite客户端安装axios 三、axios的五种请求 1.无参的get请求 2.带参的get请求 3.post请求 4.put请求 5.patch请求 6.delete请求 四、axios的数据封装格式 五、vue-axios模块 1.安装 2.在main.js文件中进行全局的配置
vue axios post发送复杂对象问题
10-16
在Vue项目中，如果不配置Axios，POST方法默认会将数据拼接在请求地址后面（URL编码），这样的数据格式不利于后台接收和解析。因为这种传输方式无法很好地处理复杂对象的层级结构，导致数据变得不直观。 ### 解决...
Error:Request failed with status code 401
小废物
10-07 7530
Error:Request failed with status code 401 错误示例： // 获取个人信息 export const getUserInfoAPI = () => { return request({ url: '/v1_0/user/profile', method: 'GET', Headers: { Authorization: `Bearer ${getToken()}` } }) } 正确做法 // 获取个人信
axios请求接口数据时报错：code: 401, message: “暂未登录或token已经过期“
qq_42767647的博客
07-16 1万+
错误截图： 现象：刚登录进去请求数据，就说过期，在网上找了很多解决方法，都不适用我。网上大多是回到登录页面，重新获取新的token，报401的错误是token时间过久，失效了。但我这情况是刚登录进去就说过期了，经过一一排查，我发现是我打错了。 解决： 经过使用浏览器的开发者工具，发现Authorization多了个$符号，于是我发现是我代码打多了。 改正前： 改正后： 没有报错了： ...
vue前端请求数据遇到401，token失效等错误
热门推荐
qq_37875903的博客
07-24 1万+
我现阶段遇到的两种可能： 1、检查axios调用接口时传递的参数格式是否正确 2、在main.js中检查http request 请求拦截器是否配置上token 接下来主要是对第二种问题做出解答： //http request 请求拦截器，有token值则配置上token值 http.interceptors.request.use(config => { config.headers.token= window.localStorage.getItem('token') return
the request failed with http status 401:unauthorized
.Net 开发
03-09 1198
http://support.microsoft.com/kb/811318/EN-US/ 
Vue:请求401 没有权限 退出登录
qq_45061461的博客
07-06 3760
在项目中,每个用户登录之后都会有一个token,一般token都会设置过期时间,如果在规定的时间内用户没有任何操作请求后端接口,就会导致用户的token过期,在过期后再次请求后端数据的话,一般接口就会返回状态码:401 标识没有权限.正常情况下接口请求后端数据,请求头携带用户token,接口返回状态: 200 表示请求成功,但是如果用户的token过期,用户就没有权限在去访问后端的数据,此时后端就会在接口的状态中返回:401。那么在这种情况下,用户状态过期,就需要咱们用户重新登录,拿到最新的token.
axios 统一处理status 401
Mrswater的博客
06-24 1805
【bugs】AxiosError {message: ‘Request failed with status code 404‘, name: ‘AxiosError‘
moly_moly的博客
08-27 1万+
今天同桌遇到这个bug 登录发请求有问题 我下意识看到404以为是传参问题。后来我们发现这个是接口和baseURL不匹配导致的 简单来说就是接口问题。后来看了下 其他人写的状态码。遇到404主要是url的问题。404：url问题，...
Http 401错误重现实验及解决办法
web开发
10-06 1万+
根据http协议对状态码的定义，401代表未经授权的访问。在IIS中在401的基础上定义了一系列的子状态码来代表各种不同情况下未经授权访问的具体原因。 401.1 - Logon failed. -登陆失败 401.2 - Logon failed due to server configuration.-基于服务器配置的登陆失败 401.3 - Unauthorized due to AC...
return new ResponseEntity 如何返回错误说明 并且在 前台 中 axios接收到
最新发布
09-27
`ResponseEntity` 是 Spring MVC 中的一个重要类，用于封装 HTTP 响应。如果你想通过它返回错误信息并处理前端的 Axios 请求，可以这样做： 首先，在服务层（Controller 或其他业务逻辑处理层），当遇到异常需要返回错误状态码和详细描述时，你可以创建一个自定义的实体类，比如 `ErrorResponse`，包含错误代码、消息等字段： ```java public class ErrorResponse { private int code; private String message; // 构造函数、getter 和 setter 方法 } ``` 然后，在处理请求的地方，如果你有具体的错误情况，可以这样创建并返回 `ResponseEntity`： ```java import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.web.context.request.RequestContextHolder; import org.springframework.web.context.request.ServletRequestAttributes; import javax.servlet.http.HttpServletRequest; import java.util.Optional; @ControllerAdvice public class GlobalExceptionHandler { @ExceptionHandler(value = Exception.class) public ResponseEntity<ErrorResponse> handleException(Exception ex) { HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest(); int status = 500; // 这里可以根据异常类型设置不同的HTTP状态码 ErrorResponse error = new ErrorResponse(status, ex.getMessage()); // 返回带有错误信息的ResponseEntity return ResponseEntity.status(status).body(error); } } ``` 在上述代码中，`@ExceptionHandler` 注解用于捕获全局异常，`handleException` 方法会在遇到异常时被调用。Spring会自动将这个方法的返回值作为 HTTP 响应发送出去。 最后，在前端，使用 Axios 发起请求时，可以配置错误处理来接收和解析服务器返回的 JSON 数据： ```javascript axios.interceptors.response.use( response => response, error => { if (error.response && error.response.data) { // 如果响应包含错误数据 const errorCode = error.response.data.code; const errorMessage = error.response.data.message; console.error(`Error ${errorCode}: ${errorMessage}`); // 在这里你可以选择如何显示错误给用户，比如抛出一个新的 Vue 错误、提示框等 } else { console.error('An unknown server error occurred'); } return Promise.reject(error); // 继续处理错误 } ); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值