使用代理解决本地调不通测试环境接口问题

前言

在本地调试前端项目，但是测试环境的接口调不通怎么办？其实就是接口跨域了，例如我们从localhost调a.test.com当然调不通，可以通过cors等解决跨域的办法办法来解决。但是如果存在一些还不能解决的情况，我们可以通过代理的方式：在浏览器访问a.test.com，如果能访问到localhost:8081的前端资源，但是会访问a.test.com的接口，那么对于后端而言，请求方还是a.test.com，那么也就不存在跨域，接口就能调通了。我们可以通过whistle和Proxy SwitchOmega两个工具达到这种效果。
whistle是一个抓包和代理工具，它会在本地起一个代理服务。
Proxy SwitchOmega是一个代理管理的工具，一般我们可能本地挂了梯子或其他代理，多个代理间切换麻烦，还有DNS缓存问题，我们可以使用Proxy SwitchOmega来管理。

步骤：

安装和启动`whistle`:

css 复制代码

npm i whistle -g
w2 start

访问whistle代理服务127.0.0.1:8899 ,添加Rules（为什么直接修改本地host不行？因为无法指定端口）：

可以看到经过代理的请求的详情：

如果代理https并且想看到抓包内容的话，还需要安装ca证书，也很简单:

安装chrome扩展`Proxy SwitchOmega`

有多种代理模式可以选择，选择proxy则为我们设置好的whistle代理，选择系统代理则为使用其他的默认代理，切换起来很方便：

是否有本地开发服务器代理

1、如果我们的项目本地开发服务没有使用代理：

yaml 复制代码

//  vite.config.js
server: {
    port: 8081,
    host: true,
    hmr: {
        overlay: false
    }
},

需要在whistle的Rules添加代理接口请求的规则：

比如测试环境为a.test.com

perl 复制代码

// 表示只代理静态资源到本地，接口还是走测试环境
https://a.test.com/api  https://a.test.com/api
https://a.test.com  http://127.0.0.1:8081

2、如果我们的项目本地使用了代理:

yaml 复制代码

//  vite.config.js
server: {
    port: 8081,
    host: true,
    proxy: {
        "/api": {
            // 测试环境域名
            target: "https://a.test.com",
            changeOrigin: true
        },
    },
    hmr: {
        overlay: false
    }
},

这时，whistle的Rules不需要再添加对/api的额外处理了：

perl 复制代码

https://a.test.com  http://127.0.0.1:8081

结果

现在我们在浏览器打开 a.test.com 就可以对我们的代码进行调试了，在项目中打一个console，可以看到访问的就是我们本地的前端资源。

使用代理解决本地调不通测试环境接口问题

前言

步骤：

安装和启动whistle:

安装chrome扩展Proxy SwitchOmega

是否有本地开发服务器代理

结果

安装和启动`whistle`:

安装chrome扩展`Proxy SwitchOmega`