开发环境调不通接口？试试这样做代理

前言

  在本地调试前端项目，但是测试环境的接口调不通怎么办？ 其实就是接口跨域了，例如我们从localhost调a.test.com当然调不通，可以通过cors等解决跨域的办法办法来解决。

  但是如果还不能解决的话，可以使用一种万能的方式解决，这种方式适用于绝大部分在开发环境因为跨域或者sso认证不通过导致调不通接口的问题。

  大致原理如下：例如开发服务起在localhost:8081，测试域名为a.test.com。现在我们在浏览器访问a.test.com，假使访问到的是localhost:8081的前端资源，但是会访问a.test.com的接口，那么对于后端而言，请求方还是a.test.com，那么也就不存在跨域，接口就能调通了。

  实际上我们可以通过whistle和Proxy SwitchOmega两个工具达到这种效果。

  whistle是一个抓包和代理工具，它会在本地起一个代理服务。

  Proxy SwitchOmega是一个代理管理的工具，一般我们可能本地挂了梯子或其他代理，多个代理间切换麻烦，还有DNS缓存问题，我们可以使用Proxy SwitchOmega来管理。

步骤：

安装和启动whistle:

npm i whistle -g
w2 start

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

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

安装chrome扩展Proxy SwitchOmega

添加代理服务器为whislte代理服务的ip和端口

代理服务器ip就是本地的ip，也可以用localhost，代理端口就是whislte运行的端口。

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

至此，已经完成了主要的步骤。但是现在我们本地开发的时候，可能会在本地启动开发服务器，要视情况对配置进行调整。

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

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

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

需要在whistle的Rules添加代理接口请求的规则：
比如测试环境为a.test.com

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

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

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

这时，因为开发服务器也进行了代理转发，所以whistle的Rules不需要再添加对/api的额外处理了：

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

热更新失效问题 [2024.03.22更新]

在whistle中添加如下配置即可：

wss://a.test.com  ws://localhost:8081

结果

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