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