跨域方法--proxy代理请求

跨域之proxy代理请求

定义: 其实就是在对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象，达到预期的目的~

操作:

//vue.config.js文件

 devServer: {
    // 代理
    proxy: {
      // 所有包含有'api'字符串的请求地址都会转发到target指向的地址
      "/api": {
        target: "http://81.71.65.4:3007",
        ws: true,
        // 允许跨域
        changeOrigin: true,
        pathRewrite: {
          "^/api": "", //通过pathRewrite重写地址，将前缀/api转为/
        },
      },
    },
  },

然后在我们的拦截器中进行配置

import axios from "axios";
import { Message, Loading } from "element-ui";
import store from "../store";
let isDev = process.env.NODE_ENV === "development";
// let baseURL;
// if (!isDev) {
//   baseURL = "http://localhost:3007";
// } else {
//   baseURL = "http://81.71.65.4:3007";
// }

const service = axios.create({
  baseURL:"/api", 
  timeout: 30000, // 请求超时时间(因为需要调试后台,所以设置得比较大)
});

let loadObj;
// request拦截器
service.interceptors.request.use(
  (config) => {
    if (!loadObj) {
      loadObj = Loading.service({
        lock: true,
        target: "#loading",
        text: "努力加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    }

    // 请求头添加token
    config.headers["user-token"] = store.state.token;
    let roleType = store.state.userInfo.type * 1;
    if (config.method === "post" && roleType === 3) {
      return Promise.reject({
        message: "没有权限,请使用管理员账号登录",
      });
    } else {
      return config;
    }
  },
  (error) => {
    setTimeout(() => {
      loadObj.close();
    }, 300);
    return Promise.reject(error);
  }
);

// response 拦截器
service.interceptors.response.use(
  (response) => {
    setTimeout(() => {
      loadObj.close();
    }, 300);
    const res = response.data;
    if (res.code == 666) {
      return res;
    } else {
      Message({
        message: res.msg,
        type: "error",
      });
      return Promise.reject(res.msg);
    }
  },
  (error) => {
    setTimeout(() => {
      loadObj.close();
    }, 300);
    Message({
      message: error.message,
      type: "error",
    });
    return Promise.reject(error.message);
  }
);

export default service;