调高前端本地调试效率

AI 总结:
这篇文章主要讨论了在前端开发中处理测试环境鉴权问题的方法。通常情况下，由于本地域名不符合鉴权规范，需要先在测试环境登录获取必要的cookie，然后将其复制到本地进行开发。然而，这种方法存在登录鉴权失效后需要重新登录的问题，复制多个cookie信息复杂等问题。为了解决这些问题，作者提供了两种解决方案：一是简化复制cookie的流程，通过浏览器扩展或一键复制来实现；二是将开发域名映射为测试域名的子域名，避免修改host和刷新dns的繁琐操作。最后，作者介绍了一种名为unplugin-https-reverse-proxy的扩展，它自动处理host映射、dns刷新，并通过启动反代服务连接本地测试域名和开发环境。

在前端的开发中，我们不可避免要处理测试环境的鉴权问题。

比如使用统一登录鉴权，本地 localhost 及 127.0.0.1 进行调试时，会导致登录失败，因为我们的本地没有后端必要的登录信息，登录被拦截了。

常规的做法是，先使用测试环境正常登录，然后把必要的 cookie 复制一份到 localhost 或 127.0.0.1 下，然后才能进行后续的开发。

问题

登录鉴权失效后，需要重新登录，流程重复
如果依赖的鉴权信息太多，那么需要复制多个 cookie 信息
在复制 cookie 时，操作复杂

解决方案

方案一

简化复制 cookie 的流程，用自动复制或一键复制。可采用的方案有通过浏览器扩展，将当前页面的所有 cookie 一键复制到目标地址。

这带来的问题有：

安装扩展需要浏览器的支持，比如 firefox 和 safari 对扩展的支持就与 chrome 不同
扩展可能会因为浏览器的不同版本而有不同的表现

方案二

我们可以在本地开发时，将开发域名映射为一个测试域名的子域名，这样当我们使用这个域名做开发时，就可以直接使用测试环境的 cookie 。比如测试域名是aaaa-test.com，那么我们可以本地设置一个子域名test.aaaa-test.com作为开发域名。

同样这也会带来一些问题，比如每次开发都需要修改 host 做域名的映射并且刷新 dns 缓存，比较烦琐。

无论是选择安装扩展，或者是修改 host ，如果项目有多个人负责，那么每个人都要做相同的操作，对新人接手项目不是很友好。

使用 unplugin-https-reverse-proxy

我开发的这个扩展采用的是第二个方案。它的思路是，通过代码自动化处理 host 的映射和 dns 的刷新，并启动一个反代服务，将本地测试域名和 dev 服务连接起来。

配置

首先，得益于 unplugin，无论项目是基于 vuecli 或者 vite 进行开发的项目，都可以使用这个扩展。

# 仅安装扩展，不下载 caddy

npm i unplugin-https-reverse-proxy --save-dev

# 在安装时立即下载 caddy

UHRP_AUTO_INSTALL_CADDY=true npm i unplugin-https-reverse-proxy --save-dev

下载完成之后，在 vue.config.js 或者 vite.config.[t|js] 中进行配置。

vuecli

module.exports = {
  devServer: {
    client: {
      // 配置 webSocketURL 以支持 HMR
      webSocketURL: {
        // protocol: 'wss', // 如果需要使用 https ，那么 hmr 的协议要进行相应的调整
        // port: 443,  // 如果需要使用 https ，那么 hmr 的端口要进行相应的调整
        hostname: 'xxx', // <- 这里需要和你下面配置的 target 一致
      },
    },
    setupExitSignals: true,
    allowedHosts: 'all',
  },
  configureWebpack: {
    plugins: [
      require('unplugin-https-reverse-proxy/webpack')({
        target: 'xxx'  // <- 你想要使用的域名
        https: false,
      }),
    ],
  },
}

vite

import HttpsReverseProxy from 'unplugin-https-reverse-proxy/vite'

export default defineConfig({
  plugins: [
    HttpsReverseProxy({
      target: 'xxx'  // <- 你想要使用的域名
      https: false,
    }),
  ],
})

就是这么简单，这就配置完成了。接下来让我们启动调试。由于我们需要修改 host 文件并刷新 dns ，所以我们的启动命令需要使用管理员权限。

# macOS

sudo -E npm run dev # 调试命令
#    ^ 使用 `-E` 保留环境变量

# windows

# 使用管理员权限运行中断
npm run dev # 调试命令

然后你就会在屏幕上看到

VITE v4.5.0  ready in 589 ms

➜  Local:   http://localhost:5173/
➜  run caddy reverse proxy success: https://test.abc.com/

在浏览器访问 https://test.abc.com/ 即可进入到我们的项目中。当调试结束，扩展会尝试还原 host 。

总结

由于我们的配置是直接写在 config 文件中的，那么当多个人使用项目时，就可以无负担地启动项目进行调试。只要在测试环境先登录一次，那么后续的开发即可无缝进行。

如果你对这个项目感兴趣，欢迎进行下载尝试。你还可以查看项目主页，点一个免费的 🌟 。如果你有任何的想法或建议，欢迎与我联系。