Vue（二）——浏览器跨域 + 拦截器

一、浏览器跨域

跨域：浏览器不同源。协议、IP、端口都相同，就是同源，只要有一个不同，就符合跨域。

在Vue项目中可以通过Config文件夹下的index.js中的proxyTable配置来实现跨域请求的转发

proxyTable: {
      '/':{
        target:'http://localhost:8081', //请求转发到的接口域名
        changeOrigin:true, //是否跨域
        pathRewrite:{
          '^/':''
        }

 

二、拦截器

1.定义一个js文件，首先配置请求拦截器和响应拦截器

import axios from 'axios'
import {Message} from 'element-ui'

//请求拦截器
axios.interceptors.request.use(config => {
  return config;
}, error => {
  Message.error({message: '请求超时！'});
})

//定义响应拦截器
axios.interceptors.response.use(data => {
  if (data.status && data.status == 200 && data.data.status == 500) {
    //业务逻辑错误
    Message.error({message: data.data.msg});
    return;
  }
  if (data.data.msg) {
    Message.success({message: data.data.msg});
  }
  return data.data;
}, err => {
  if (err.response.status == 504 || err.response.status == 404) {
    Message.error({message: '服务器被吃了！'});
  } else if (err.response.status == 403) {
    Message.error({message: '权限不足，请联系管理员'});
  } else if (err.response.status == 401) {
    Message.error({message: err.response.data.msg});
  } else {
    if (err.response.data.msg) {
      Message.error({message: err.response.data.msg});
    } else {
      Message.error({message: '未知错误！'});
    }
  }
})

2.然后进行方法封装

//进行方法封装
let base = '';
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    handers: {
      'Content-Type': 'application/json'
    }
  });
}
export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: `${base}${url}`,
    data: params,
    handers: {
      'Content-Type': 'application/json'
    }
  });
}
export const deleteRequest = (url) => {
  return axios({
    method: 'delete',
    url: `${base}${url}`
  });
}
export const getRequest = (url) => {
  return axios({
    method: 'get',
    url: `${base}${url}`
  });
}

3.在main.js中引入方法即可使用

import {postRequest} from "./util/api";
import {putRequest} from "./util/api";
import {getRequest} from "./util/api";
import {deleteRequest} from "./util/api";

Vue.prototype.getRequest=getRequest;
Vue.prototype.postRequest=postRequest;
Vue.prototype.putRequest=putRequest;
Vue.prototype.deleteRequest=deleteRequest;

4.使用方式，除方法不同，参数不一样外其他都类似

//登录的方法，发送请求到服务端进行验证登录，传入请求的路径和客户端接收到的账号信息
  methods:{
    doLogin(){
      this.postRequest("/doLogin",this.user).then(msg=>{
        //登录成功
        if(msg){
          //将服务器端返回的对象保存到浏览器的sessionstorage中  
          window.sessionStorage.setItem("user",JSON.stringify(msg.obj));
          //登录成功，跳转到 /home路径下
          this.$router.replace("/home");
        }
      })
    }
  }

//注销登录的方法
    methods:{
      menuItemCommand(cmd){
        if(cmd == 'logout'){
          this.$confirm('此操作将注销登录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              //发送请求到 /lougout 映射路径
              this.getRequest("/logout");
              //将保存在浏览器sessionStorage里面的user对象信息删除
               window.sessionStorage.removeItem("user");
               //注销成功，跳转到 /路径，即设置的登录界面
               this.$router.replace("/");
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
      }
    }

 

转载于:https://my.oschina.net/u/4116631/blog/3052044