axios 跨域问题

2018-05-16 05:34:48 1.2k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Vue使用axios二次封装、解决跨域问题在项目中，axios 进行二次封装可以更加方便的使用 Ajax 请求，提高代码复用性和维护性。同时可以封装统一的请求与响应拦截处理。在实际开发过程中，浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后，官方推荐使用axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。阅读详情

前端用的是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)

      })

    })

  }

}