axios在后端返回401时,获取不到error.response和返回的状态码问题

您所在的位置：网站首页 › 401状态码是什么错误 › axios在后端返回401时,获取不到error.response和返回的状态码问题

axios在后端返回401时,获取不到error.response和返回的状态码问题

2024-06-12 11:16| 来源: 网络整理| 查看: 265

在axios中爬过的坑

项目是后端采用的grails + spring cloud + gorm + es等插件做的, 前端采用的是element + axios + vue等,身份认证采用的是spring cloud oauth2.0 . 开发采用的是gradle搭建,语言使用的是groovy 在搭完框架后,正常流程postman都能跑的通,但是如果使用 axios就会遇到跨域问题然后就解决吧首先是preflight被禁的问题: 首先是webSecureAdapter这里

class WebSecure extends WebSecurityConfigurerAdapter{ @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests().requestMatchers(new RequestMatcher() { @Override boolean matches(HttpServletRequest request) { return CorsUtils.isPreFlightRequest(request) } }).permitAll() //.and()其他的内容 } }

然后发现问题还是没解决由于认证中心和资源在同一个项目上,暂时未拆分所以 ResourceServerConfigurerAdapter 这里也需要配置

class ResourceConf extends ResourceServerConfigurerAdapter { @Override public void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .requestMatchers(new RequestMatcher() {//preflght permitAll @Override boolean matches(HttpServletRequest request) { return CorsUtils.isPreFlightRequest(request) } }).permitAll() }

好了 ,到这里数据访问的跨域已经解决完成了但是身份认证的时候也是要跨域的,而且我们的返回数据有部分内容是在header中的,这个在使用spring的框架时,会将其中的header替换掉,继续修改找了半天,终于找到一个将spring Boot的Filter的修改

private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址 corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头 corsConfiguration.addAllowedMethod("GET"); // 3 设置访问源请求方法 corsConfiguration.addAllowedMethod("POST"); corsConfiguration.addAllowedMethod("DELETE"); corsConfiguration.addAllowedMethod("PUT"); corsConfiguration.addAllowedMethod("PATCH"); corsConfiguration.addExposedHeader("Content-Range")//这里是需要额外配置的header内容 return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); // 4 对接口配置跨域设置 return new CorsFilter(source); }

好了,到这里好像已经全部配置完成了,数据能正常的访问,接口也都能正常的请求了,…. 但是,在使用axios的时候,如果我们使用的token过期,或者token出错的时候,在浏览器能获取401 ,但是axios死活获取不到正常的返回码,找了一堆的源码,可以确定在axios中处理返回结果的位置在axios 的lib/adapter/xhr.js中

request[loadEvent] = function handleLoad() { if (!request || (request.readyState !== 4 && !xDomain)) { return; } // The request errored out and we didn't get a response, this will be // handled by onerror instead // With one exception: request that using file: protocol, most browsers // will return status as 0 even though it's a successful request if (request.status === 0 && !(request.responseURL && request.responseURL.indexOf('file:') === 0)) { return;//注意这里,这里如果遇到上述的401/403等问题,直接返回,导致我们的axios不能取到返回码 } // Prepare the response var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null; var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response; var response = { data: responseData, // IE sends 1223 instead of 204 (https://github.com/mzabriskie/axios/issues/201) status: request.status === 1223 ? 204 : request.status, statusText: request.status === 1223 ? 'No Content' : request.statusText, headers: responseHeaders, config: config, request: request }; settle(resolve, reject, response); // Clean up request request = null; };

同时前端会报错 ,出现跨域问题, 再次整理后端代码,终于发现了WebSecurityConfigurerAdapter中

@Override protected void configure(HttpSecurity http) throws Exception { ... .csrf().disable();//这里同上面是相同的位置 }

这里的csrf被禁用后,如果使用跨域,就导致axios不能获取正常error.response 将这里修改为

http.authorizeRequests() ... .and().cors()

好了这时候,如果token超时或者使用不正确的token的时候就能正常的返回error.response了

【本文地址】

axios在后端返回401时,获取不到error.response和返回的状态码问题

axios在后端返回401时,获取不到error.response和返回的状态码问题

今日新闻

推荐新闻