Vue 配置代理

---

一、为什么要配置代理

通过配置代理可以解决跨域问题

什么是跨域？

跨域是两个不同端口的服务器进行发送和返回请求

这是因为浏览器为了保护网站不被破坏，开启了同源策略，不同端口服务器进行数据交互
会被浏览器进行拦截

---

二、怎么解决跨域问题

1. 引入cors,并进行注册

但是此方法会使所有服务器都可以成功请求，不会进行限制

2. 配置代理

配置代理可以指定对应的服务器允许请求

---

三、怎么配置代理

在Vue脚手架中配置vue.config.js文件

方法一

module.exports = {
  devServer:{
    proxy:"http://localhost:8081"
  }
}

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

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

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

方法二

module.exports = {
	devServer: {
      proxy: {
      '/index': {							// 匹配所有以 '/index'开头的请求路径
        target: 'http://localhost:8081',	// 代理目标的基础路径
        pathRewrite: {'^/index':''},			// 代理往后端服务器的请求去掉 /index 前缀
        ws: true,							// 用于WebSocket支持
        changeOrigin: true
      },
      '/num': {
        target: 'http://localhost:8082',
        pathRewrite: {'^/num': ''},
        changeOrigin: true
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为服务器相同的端口号
   changeOrigin设置为false时，服务器收到的请求头中的host为真正的端口号
   changeOrigin默认值为true
*/

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

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