在开发过程中，由于浏览器的同源策略限制，前端应用（如Vue.js）通常不能直接向不同源的服务器发起Ajax请求，这会导致跨域问题。Vue CLI 4 提供了一个便捷的解决方案，即通过配置反向代理（proxy）来解决这个问题。下面我们将详细探讨Vue CLI 4 配置反向代理proxy的步骤以及其工作原理。
让我们理解什么是反向代理。反向代理是网络代理的一种形式，它接收来自客户端的请求并将其转发到目标服务器。在开发环境中，反向代理可以帮助我们绕过同源策略，使得前端应用可以与不同源的API进行通信，而服务器端看起来就像是直接与代理服务器交互。
在Vue CLI 4中，反向代理的配置主要在`vue.config.js`文件中进行。如果你的项目中还没有这个文件，你需要在项目根目录下手动创建它。这个文件是Vue CLI自定义配置的入口，允许我们对Webpack等构建工具进行额外的配置。
下面是如何创建和配置`vue.config.js`来设置反向代理的步骤：
1. 在项目根目录下创建`vue.config.js`文件。
2. 在文件中添加以下内容：
```javascript
module.exports = {
devServer: {
proxy: {
// 将以'/j'开头的URL代理到目标URL
'/j': {
target: 'https://movie.douban.com',
// 允许跨域
changeOrigin: true
}
}
}
};
```
这里，`'/j'`是代理的路径前缀，所有以`'/j'`开头的请求将被代理到`'https://movie.douban.com'`。`changeOrigin`选项设置为`true`表示在本地开发环境时，会模拟请求是从目标服务器的域名发出的，从而解决跨域问题。
3. 修改你的axios请求URL。例如，原请求URL为`https://movie.douban.com/j/search_subjects`，现在只需将URL改为相对路径`'/j/search_subjects'`：
```javascript
axios({
method: "get",
url: "/j/search_subjects", // 代理路径
params: {
type: "movie",
tag: "热门",
page_limit: 50,
page_start: 0
}
}).then(res => {
console.log(res.data);
});
```
4. 重启Vue CLI 4的开发服务器以应用新的配置。
通过这种方式，当前端发起请求时，Vue CLI 4的开发服务器会拦截这些请求，然后将它们转发到指定的目标URL，从而避免了跨域问题。这样，你可以像访问本地资源一样轻松地测试远程API。
总结起来，Vue CLI 4 的反向代理proxy功能是开发过程中的强大工具，它简化了跨域请求的处理，使开发者能够在本地环境中顺利地调试和测试应用。通过正确配置`vue.config.js`文件，我们可以轻松地将请求代理到任何我们需要的目标服务器，确保前端与后端的顺畅协作。在实际开发中，可以根据项目需求调整代理规则，适应各种API接口的调用。希望这篇文章能帮助你更好地理解和应用Vue CLI 4的反向代理功能。
