[JavaScript知识库]Vue CLI脚手架配置代理

Vue CLI脚手架配置代理

1. 在开发过程中，前端应用和后端服务器一般没有运行在同一个主机；当需要往后端服务器发送请求时，由于两者不在同一个服务器上，会涉及到跨域问题，浏览器会将服务器返回的数据进行劫持导致前端无法接收到数据
   1. 同源：协议、域名（地址）、端口号，三者都相同就称之为同源
   2. 跨域：不同源的网站之间互相发送请求，称之为跨域访问
2. 面对这种情况，就需要进行配置代理服务器；
   1. 代理服务器的协议、域名、端口号和前端所处的位置是相同的
   2. 而服务器与服务器之间是可以互相发送数据使用的是传统的http协议，不涉及跨域问题
   3. 因此当代理服务器接受到后端服务器返回的数据时，就可以将数据传给前端（同源）

配置代理方式一

1. 在vue.config.js文件中添加如下配置：

   module.exports = {
       devServer: {
           proxy: 'http://xxx.xxx.xxx.xxx:xxxx' // 代理目标服务器地址
   	}
   }
   

2. 说明：
   1. 优点：配置简单
   2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
   3. **注意：使用此种方式配置代理，会优先匹配前端资源，若匹配到前端资源后则不会请求后端服务器；**前端资源位置在public文件夹下，若接口请求路径与public文件下资源路径一致，则请求到该文件夹下的前端资源

配置代理方式二（推荐）

1. 在vue.config.js文件中添加如下配置：

   module.exports = {
       devServer: {
           '/api1': { // 匹配所有以'/api1'开头的请求路径
              	target: 'http://xxx.xxx.xxx.xxx:xxxx', // 代理目标服务器基础地址
               changeOrigin: true,
               pathRewrite: {'^/api1' : ''} // 将请求前缀/api1替换为空
           },
           '/api2': { // 匹配所有以'/api2'开头的请求路径
              	target: 'http://xxx.xxx.xxx.xxx:xxxx', // 代理目标服务器基础地址
               changeOrigin: true,
               pathRewrite: {'^/api2' : ''} // 将请求前缀/api2替换为空
           }
   	}
   }
   
   // changeOrigin表示是否将浏览器真实的请求端口号告知后端服务器
   // ture: 不告知   false: 告知   默认true
   

2. 说明：
   1. 优点：可以配置多个代理，且可以灵活配置请求是否走代理，避免默认访问到前端资源的情况
   2. 缺点：配置稍微繁琐，必须配置前缀