axios ,springboot oauth2 401跨域问题

Question

前端用的是vue axios请求
后台用springboot oauth2的token认证

我已经配置的跨域请求
现在遇到的问题是 登录正常获取token 在做其他请求一切正常
当token过期，浏览器状态码为401， 客户端怎么拿的到服务器返回的error.response 为undefined 出现的问题为跨域问题，
我觉得应该是修改springboot oauth2 的 filter ,不知道怎么修改

springboot 我当前的跨域设置

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
@Order(-1)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
 
    @Resource(name = "usersService")
    private UserDetailsService userDetailsService;
 
    @Autowired
    private ClientDetailsService clientDetailsService;
 
    @Override
    @Bean
    public AuthenticationManager authenticationManagerBean() throws Exception {
        return super.authenticationManagerBean();
    }
 
    @Autowired
    public void globalUserDetails(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService)
                .passwordEncoder(encoder());  //加密
    }
 
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .anonymous().disable()
            .requestMatchers()
            .antMatchers(HttpMethod.OPTIONS, "/oauth/token");
    }
 
    @Bean
    public TokenStore tokenStore() {
        return new InMemoryTokenStore();
    }
 
    @Bean
    @Autowired
    public TokenStoreUserApprovalHandler userApprovalHandler(TokenStore tokenStore){
        TokenStoreUserApprovalHandler handler = new TokenStoreUserApprovalHandler();
        handler.setTokenStore(tokenStore);
        handler.setRequestFactory(new DefaultOAuth2RequestFactory(clientDetailsService));
        handler.setClientDetailsService(clientDetailsService);
        return handler;
    }
 
    @Bean
    @Autowired
    public ApprovalStore approvalStore(TokenStore tokenStore) throws Exception {
        TokenApprovalStore store = new TokenApprovalStore();
        store.setTokenStore(tokenStore);
        return store;
    }
 
    @Bean
    public BCryptPasswordEncoder encoder(){
        return new BCryptPasswordEncoder();
    }
 
 
    /**
     * 跨域过滤器
     * @return
     */
    @Bean
    public FilterRegistrationBean filterRegistrationBean() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(1);
        return bean;
    }

vue配置

import axios from 'axios'
import store from '../store'
// axios 配置
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://localhost:8888'
// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    let token = store.state.token
    if (token === '') {
      config.auth = {username: 'devglan-client', password: 'devglan-secret'}
      config.headers = {'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'}
    } else {
      config.headers = {'Content-type': 'application/json; charset=utf-8'}
    }
    return config
  },
  error => {
    console.log('-------request-----')
    return Promise.reject(error)
  })
 
// 添加响应拦截器即异常处理
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error && error.response) {
      console.log('*******errorerrorerrorerror***************')
      console.log(error)
    } else {
      console.log('********服务器出错**************')
      console.log(error.response)
      // debugger
      console.log(error)  
      console.log(error.config)
      console.log(error.code) //
      console.log(error.status)
      console.log('********服务器出错**************')
      // error.message = '服务器出错'
      this.router.replace({
        path: 'login',
        query: {redirect: this.router.currentRoute.fullPath}
      })
    }
    return Promise.reject(error)
  }
)
 
export default {
  fetchGet (url, params = {}) {
    let token = store.state.token
    if (token !== '') {
      url = url + '?access_token=' + token
    }
    return new Promise((resolve, reject) => {
      axios.get(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        console.log('------fetchGet-----error')
        console.log(error)
        reject(error)
      })
    })
  },
  fetchPost (url, params = {}) {
    let token = store.state.token
    if (token !== '') {
      url = url + '?access_token=' + token
    }
    console.log('fetchPost----url---->' + url)
    return new Promise((resolve, reject) => {
      axios.post(url, params).then(res => {
        resolve(res)
      }).catch(error => {
        console.log('------fetchPost-----error')
        console.log(error)
        reject(error)
      })
    })
  }
}

401时 返回的错误信息

返回没有response

网上找的问题，跟这位大哥的错误挺像的
https://segmentfault.com/q/10...

跪求各路大神来围观

Answer 1

兄弟，解决这个问题了吗？？我现在也卡在这个问题上了，希望能不吝赐教