vue-cli配置代理

1. 方法一

在vue.config.js中添加如下配置

本地访问域名: http://localhost:8080/
api地址:  https://school.qifuxiong.com/api/test/signs

# vue.config.js文件中
devServer: {
    proxy: 'https://school.qifuxiong.com'
}
# 前端请求demo
methods:{
    getStudents(){
      axios.get('http://localhost:8080/api/test/signs')
      .then(
          response=>{
            console.log('请求成功了',response.data)
          }
      )
    }
 }

说明

• 优点: 配置简单, 请求资源时直接发给前端(8080)即可;
• 缺点: 不能配置多个代理, 不能灵活的控制请求是否走代理;
• 工作方式: 若按照上述配置代理, 当请求了前端不存在的资源时, 那么该请求会转发给服务器(优先匹配前端本地根目录资源)

2.方法二

编写vue.config配置具体代理规则

# vue.config.js文件中
# `/api` 是请求前缀, 如果请求前缀是这个, 走代理; 不是这个, 不走代理;
# `^/api':''`  所有以api开头的路径替换为空字符串
devServer: {
        proxy: {
            '/api': {
                target: 'https://school.qifuxiong.com',
                pathRewrite: {'^/api': ''}, // 下面这个配置的作用是, 把`/api/api地址`转发给服务器的只有`api地址`, 去掉`/api`
                ws: true, //  websocket 用于支持websocket,不写也默认true
                changeOrigin: true, //不写也默认true,用于控制请求头中的host值
            }
        }
    }
# 前端请求demo   
methods:{
    getStudents(){
      axios.get('http://localhost:8080/api/api/test/signs').then(
          response=>{
            console.log('请求成功了',response.data)
          }
      )
    }
  }

说明:

• 优点: 可以配置多个代理, 且可以灵活的控制请求是否走代理
• 缺点: 配置略微繁琐, 请求资源时必须加前缀