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

在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了