【前言】

前后端联调一个重要桥梁就是通过代理。而代理又分为正向代理和反向代理。正向代理就是代理客户端（典型的就是charles的常规使用），反向代理就是代理服务器（像webpack或gulp中的返向代理）。

正向代理的使用场景

1. 线上的环境已经确定，然后前端需要用本地的代码调试，后端就用线上的。

2. 线上的项目是有多个项目组成的（比如一个总项目套了很多iframe）,本地的项目是其中一个项目。但是由于登录验证的存在，本地的项目就不好通过反向代理进行调试（因为本地的工程只是一其中一个项目的工程，不包含登录部分的代码）。

反向代理的使用场景

1. 线上的环境已经确定，然后前端需要用本地的代码调试，后端就用线上的。

2. 线上的项目和本地的项目是一样的（没有嵌套iframe）。

charles@4.5.6(正向代理的软件)和vue-cli@4.4.1（vue的脚手架基于webpack实现了反向代理）的优缺点对比

charles的优点：

1. 特别适合对那种由多个iframe组成的大项目
2. 除了正向代理，还有很多其他功能

charles的缺点：

1. charles学习成本稍微比webpack的反向代理高一些
2. charles是收费软件，webpack里的反向代理插件是开源的
3. 不能起服务，只能起代理的功能

webpack反向代理的优点：

1. 各种前端框架的都是基于webpack的，反向代理的配置难度低
2. 免费
3. 可以起服务

webpack反向代理的缺点：

1. 不适合那种由多个iframe组成并包含耦合逻辑的大项目

charles正向代理使用总结：

1. 本地起好自己的项目，拿到url
2. 将线上项目的js,css代理到本地的服务里

具体操作如下：

选择线上资源服务器的url

右键需要代理的资源，选择Map Remote

在弹出的对话框中将远程的资源代理到本地

vue-cli@4.4.1反向代理使用总结

在项目根目录下新建一个vue.config.js文件

const fs = require('fs');
const path = require('path');

module.exports = {
    devServer: {
        // 设置代理
        proxy: {
            "/": {
                target: "https://simqa.dxy.net/", // 域名
                // target: "https://localhost:3005/", // 域名
                secure: true,//是否使用https
                // ws: true, // 是否启用websockets
                changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {
                    // '^/ad': '/ad'
                }
            }
        },
        // https: {
        //     key: fs.readFileSync(path.join(__dirname, './cert/private_key.pem')),
        //     cert: fs.readFileSync(path.join(__dirname, './cert/ca-cert.pem'))
        // }
    }
};

参考文献

www.jianshu.com/p/aaa417efd…

www.cnblogs.com/xiaoshen666…