axios 跨域问题

[叨叨的蚂蚁]

前端用的是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/1010000013152443/a-1020000014881729

跪求各路大神来围观

[叨叨的蚂蚁]

引用 1 楼 wcwtitxu 的回复:

在你的 CorsFilter 之后， oAuthor 验证之前，插入个 filter 处理 options 请求

public class OptionsFilter implements Filter {
	public void destroy() {
	}

	public void init(FilterConfig filterConfig) throws ServletException {
	}

	public void doFilter(ServletRequest request, ServletResponse response,
			FilterChain chain) throws IOException, ServletException {
		HttpServletRequest req = (HttpServletRequest) request;
		HttpServletResponse res = (HttpServletResponse) response;
		if ("OPTIONS".equals(req.getMethod())) { // options 请求无需具体响应，直接返回200
			res.setStatus(200);
		} else {
			chain.doFilter(request, response);
		}
	}
}

你这个好像不起作用，我新建了一个filter，吧以前的跨域方法删除后 成功了

[wcwtitxu]

在你的 CorsFilter 之后， oAuthor 验证之前，插入个 filter 处理 options 请求

public class OptionsFilter implements Filter {
	public void destroy() {
	}

	public void init(FilterConfig filterConfig) throws ServletException {
	}

	public void doFilter(ServletRequest request, ServletResponse response,
			FilterChain chain) throws IOException, ServletException {
		HttpServletRequest req = (HttpServletRequest) request;
		HttpServletResponse res = (HttpServletResponse) response;
		if ("OPTIONS".equals(req.getMethod())) { // options 请求无需具体响应，直接返回200
			res.setStatus(200);
		} else {
			chain.doFilter(request, response);
		}
	}
}

[叨叨的蚂蚁]

能具体点么 大哥，怎么插入插入个 filter 处理 options ， 你这个好像就是跨越的设置 我正常登陆的跨域是正常的， 当token过期失效，出现401的时候返回的erro.response是空的