SpringBoot+Vue数据交互

后端框架Spring Boot,前端框架vue

1. 跨域+携带cookie

跨域-携带cookie

2. 拦截器

在main.js里设置拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前,格式化参数,增加token
  let data = config.data;
  let params = new URLSearchParams()
  for (var key in config.data) {
    params.append(key, data[key])
  }
//params.append("tokenStr", getTimes())
  config.data = params;
  return config;
}, function (error) {
  return Promise.reject(error);
});
SpringBoot+Vue数据交互_第1张图片
拦截器

3. 发送请求

    login:function(){
      let that=this;
      this.axios({
        method: 'post',
        url: 'http://000.00.00.0:8888/login', //后端api
        data: {
          account: $("#account").val(),  //传给后端的数据
          userPassword: $("#pwd").val()
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}   //跨域
      }).then(function (res) {
        console.log(res);
      }).catch(function (error) {
        console.log(error)
      });
    },

你可能感兴趣的:(SpringBoot+Vue数据交互)