vue2,vue3-跨域配置proxy代理

小鱼儿心语：没有谁能击垮你，除非你自甘堕落。不拼一把，你怎么知道自己是人物还是废物！比你差的人没放弃，比你好的人仍在努力，你有什么资格说你无能为力！

由于之前不太会修改到代理这一块，前段时间仔细研究了一下配置多个proxy代理跨域的问题，才茅塞顿开，故想写下这篇文章，加深自己的理解，也希望能帮助到大家~

一、安装

npm install axios --save

二、vue.config.js中配置多个跨域代理

1、vue2代理配置： 使用pathRewrite
2、vue3代理配置： 使用rewrite

proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://192.168.0.114:58001/sc`,
        //target: `http://192.168.0.114:58001/sc`,
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: ""
        }
      },
  // 远程跨域
      '/flyflow-api': {
        target: 'http://10.203.150.71:8080/dts-auto-sprinkler-system',
        changeOrigin: true,
        // pathRewrite: {
        //   '^/flyflow-api': '/flyflow-api'
        // }
        rewrite: (path) =>
          path.replace(new RegExp("^/flyflow-api"), ""),
      },
      '/danbing-api': {
        target: 'http://10.203.133.6',
        changeOrigin: true,
        // pathRewrite: {
        //   '^/danbing-api': '/danbing-api'
        // }
        rewrite: (path) =>
          path.replace(new RegExp("^/danbing-api"), ""),
      }
    },

三、接口请求的封装

main.js全局引入封装的接口请求

import http from "@/utils/request";
Vue.prototype.$http = http;

// 服务器-火灾
import serverhttp from "@/utils/requestserver";
Vue.prototype.$serverhttp = serverhttp;

// 服务器-单兵
import danbinghttp from "@/utils/requestdanbing";
Vue.prototype.$danbinghttp = danbinghttp;

requestserver.js文件

import axios from 'axios'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: '/flyflow-api',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;',
    "Access-Control-Allow-Origin": '*', // 允许所有域，仅限开发环境使用！
    "Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Authorization",
    "Access-Control-Allow-Credentials": true,
    'isToken': false
  },
  // 超时
  timeout: 60000
})

export default service

requestdanbing.js文件

import axios from 'axios'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: '/danbing-api',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;',
    "Access-Control-Allow-Origin": '*', // 允许所有域，仅限开发环境使用！
    "Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Authorization",
    "Access-Control-Allow-Credentials": true,
    'isToken': false
  },
  // 超时
  timeout: 60000
})

export default service

request.js文件request拦截器&响应拦截器

import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 60000
})
// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['token'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method === 'get' && config.params) {
    let url = config.url + '?';
    for (const propName of Object.keys(config.params)) {
      const value = config.params[propName];
      var part = encodeURIComponent(propName) + "=";
      if (value !== null && typeof (value) !== "undefined") {
        if (typeof value === 'object') {
          for (const key of Object.keys(value)) {
            if (value[key] !== null && typeof (value[key]) !== 'undefined') {
              let params = propName + '[' + key + ']';
              let subPart = encodeURIComponent(params) + '=';
              url += subPart + encodeURIComponent(value[key]) + '&';
            }
          }
        } else {
          url += part + encodeURIComponent(value) + "&";
        }
      }
    }
    url = url.slice(0, -1);
    config.params = {};
    config.url = url;
  }
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
  // 未设置状态码则默认成功状态
  const code = res.data.code || 200;
  // 获取错误信息
  const msg = errorCode[code] || res.data.msg || errorCode['default']
  if (code === 401) {
    MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
      confirmButtonText: '重新登录',
      cancelButtonText: '取消',
      type: 'warning'
    }
    ).then(() => {
      store.dispatch('LogOut').then(() => {
        location.href = '/index';
      })
    }).catch(() => { });
    return Promise.reject('令牌验证失败')
  } else if (code === 500) {
    Message({
      message: msg,
      type: 'error'
    })
    return Promise.reject(new Error(msg))
  } else if (code !== 200) {
    Notification.error({
      title: msg
    })
    return Promise.reject('error')
  } else {
    return res.data
  }
},
  error => {
    console.log('err' + error)
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口连接异常";
    }
    else if (message.includes("timeout")) {
      message = "系统接口请求超时";
    }
    else if (message.includes("Request failed with status code")) {
      message = "系统接口" + message.substr(message.length - 3) + "异常";
    }
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

四、接口请求调用

this.$http.get("monitor-api/healthyDataImprove/getInfoListPage/project").then(res => {
     console.log(res)
})
this.$serverhttp.post("monitor-api/healthyDataImprove/getInfoListPage/project").then(res => {
     console.log(res)
})
this.$danbinghttp.get("monitor-api/healthyDataImprove/getInfoListPage/project").then(res => {
     console.log(res)
})