前后端分离Demo

1. 前端代码:

    1.1 main.js

// 引用axios，并设置基础URL为后端服务api地址
//var axios = require('axios');
axios.defaults.baseURL = 'http://localhost:2000/cc';   //注意有没s，不然会报错
//对应后端网关统一地址
//axios.defaults.baseURL = ' https://www.easy-mock.com/mock/5d3e8263c3776b0913c49b88/demo '//easy mock对应后端网关统一地址
// 将API方法绑定到全局  /plat/login
Vue.prototype.$http = axios     //调用的时候可以直接使用this.$http 来指代 axios

//用来判断session里面有没user，然后跳路径
router.beforeEach((to, from, next) => {
  //NProgress.start();
  if (to.path == '/login') {
    sessionStorage.removeItem('user');
  }
  let user = JSON.parse(sessionStorage.getItem('user'));
  if (!user && to.path != '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})

1.2 Login.vue

this.$http.post('/plat/login',loginParams)   //这个是访问后台的，plat是后台网关配置的前缀
      .then(data=>{
          this.logining=false;
          console.debug(data);
          this.logining = false;
          //NProgress.done();
          let {success,message,restObj,errorCode}= data.data;   //后台返回的json数据格式，restObj要有对象，不然前台的session没有对象会一直跳login界面
          if (!success) {
              this.$message({  //this当前的vue对象，
                  message: message,
                  type: 'error'
              });
          } else {
              sessionStorage.setItem('user', JSON.stringify(restObj));
              this.$router.push({ path: '/table' });
          }
      })
      /*.catch(error=>{
          console.debug(error);
      })*/
} else {
  console.log('error submit!!');
  return false;
}

 

注：config的index.js可以配置ip

2.后台配置跨域器，cors的跨域解决方案

    2.1zuul网关中配置GlobalCorsConfig类

2.2 GlobalCorsConfig类

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://127.0.0.1:8080");
        config.addAllowedOrigin("http://localhost:8080");
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");
        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new
                UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

    

转载于:https://my.oschina.net/u/4083694/blog/3081040