vue 是一个流行的 javascript 框架，它可以用来创建交互式的 web 应用程序。在开发过程中，我们通常会用到 vue-cli 来初始化一个基本的 vue 项目。 vue-cli 是 vue 官方提供的一个脚手架工具，它提供了许多方便的功能，例如项目初始化、打包、发布等。
但是，在开发过程中我们可能会遇到一个问题：跨域请求。由于浏览器的同源策略，当我们在前端 Ajax 发送请求时，只能请求同一域名下的服务器资源，而不能请求其他域名的服务器资源。这个时候，我们可以通过 vue-cli 中的代理请求来解决这个问题。
那么，vue-cli 中的代理请求是如何实现的呢？
直接请求和代理请求的区别
在了解代理请求的原理之前，我们需要了解一下直接请求和代理请求之间的区别。当我们在开发过程中直接通过 Ajax 请求访问后台服务时，请求会直接从前端发往后端，如下图所示：
立即学习“前端免费学习笔记（深入）”；
这种方式会涉及到跨域问题。如果后端接口没有设置跨域响应头，那么浏览器就会禁止前端发起 AJAX 请求，从而导致请求失败。
而在 vue-cli 中，我们会通过代理请求来解决这个问题。代理请求的基本思路是，将请求发送到本地服务器，然后由本地服务器将请求转发至后端服务器。
vue.config.js 中的代理配置
在 vue-cli 项目中，我们可以通过配置 vue.config.js 文件来设置代理请求。在该文件中，我们可以设置 devServer 选项，通过设置 proxy 对象进行代理配置。下面是一个简单的例子：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
}在上述代理配置中，我们将 /api 路径下的请求都转发到本地的 http://localhost:8080 地址。
OdnShop(原企站帮微商城系统，更名为OdnShop),基于ASP.NET 4.0+Access开发的轻量级微信商城系统，前台简洁美观，后台容易操作。系统容易部署，空间成本低，大部分的几百块一年的虚拟主机均可支持（具体请咨询空间商），适合要求不高，预算不多的小商店，小企业初次尝试微信线上销售产品，目前基本的核心功能，包括微信登陆/支付，产品管理，购物车与订单管理，分享获取积分，积分礼品兑换功能
其中， changeOrigin 选项用于控制是否需要更改请求头中原始主机名。
proxy 对象中，我们可以设置多个代理地址，例如：
module.exports = {
devServer: {
proxy: {
'/api1': {
target: 'http://localhost:8081',
changeOrigin: true
},
'/api2': {
target: 'http://localhost:8082',
changeOrigin: true
}
}
}
}这里的 /api1 和 /api2 分别代表要转发的请求路径， target 属性指定了要转发到的服务器地址。
实现原理
在了解了代理请求的配置后，我们来看一下代理请求的实现原理。
首先，当我们在前端发起请求时，请求会先被发送到本地服务器。本地服务器接收到请求后，会对请求进行一系列处理，包括修改请求头、修改请求路径等。然后，将处理过的请求转发至后端服务器上。
流程图如下：
需要注意的是，在本地服务器中，我们需要设置代理中间件，例如 http-proxy-middleware。代理中间件是一个类似于响应请求的拦截器，用于控制请求过程并修改请求内容。我们可以通过配置代理中间件来实现请求的代理转发。
总结
通过上述的介绍，我们了解了 vue-cli 中的代理请求原理。代理请求是一种在前端解决跨域问题的方法，通过将请求转发至本地服务器，再由本地服务器将请求转发至后端服务器，达到跨域请求的效果。在 vue-cli 中，我们可以通过配置 vue.config.js 文件来设置代理请求，从而实现前端的跨域请求。
