课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack

课程章节：Vue3.0

主讲老师：双越老师

课程内容：

今天学习内容包括：

1. 配置代理
   

课程收获：

配置代理

• 	devServer: {
  		proxy: 'http://localhost:5000'	
  	}

• • 优点：配置简单，请求资源时直接发给前端（8080）即可。

  • 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

  • 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）。

    module.exports = {
      pages: {
        index: {
          // 入口
          entry: 'src/main.js',
        },
      },
      lintOnSave: false, //关闭语法检查
 
    // 开启代理服务器 (方式二)
    devServer: {
      proxy: {
        '/api1': { //匹配所有以 /api1 开头的请求路径
            target: 'http://localhost:5000', //代理目标的基础路径
            pathRewrite: {'^/demo': ''}, //去掉请求头匹配目标地址
            ws: true, //用于支持 websocket
            changeOrigin: true //用于控制请求头中的 host值
          }
        }
      }
    }

• changeOrigin 设置为 true 时，服务器收到的请求头中的 host 为：localhost: 5000

• changeOrigin 设置为 false 时，服务器收到的请求头中的 host 为：localhost: 8000

• changeOrigin 默认值为 true

• 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

• 缺点：配置略微繁琐，请求资源时必须加前缀。

注意事项

• 方法一虽然配置简单，但一次只能代理 一个 服务器。方法二一次可以代理 多个 服务器。

• vue.config.js 中配置的地址是 500x（5050），在 App.vue 中 axios 通过 get 得到的地址是 808x（8080）。

• 方法二在配置过程中，要对请求头通过正则表达式进行 重写，这样可以去掉 axios 请求地址的请求前缀，才能正确匹配。

课程学习截图：