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