前言

在微前端项目开发过程中，经常会遇到这样的场景：

测试环境主应用
http://test-server:8080

↓ 点击菜单

用户中心
http://test-server:7101

订单中心
http://test-server:7102

报表中心
http://test-server:7103

开发人员希望：

• 主应用继续使用测试环境
• 仅将某个子应用切换到本地开发环境
• 不修改测试环境配置
• 不影响其他开发人员

例如：

用户中心 → localhost:5173
订单中心 → 测试环境
报表中心 → 测试环境

这时候浏览器端请求重写工具就派上用场了。

本文对比三款常用工具：

• Requestly
• Redirector
• Tampermonkey

帮助大家选择最适合自己的方案。

一、Requestly

简介

Requestly 是目前最流行的浏览器请求拦截与重写工具。

功能非常强大：

• URL Redirect
• Replace Response
• Modify Headers
• Mock API
• Delay Request
• Script Injection

可以理解为：

浏览器版 Charles
+
浏览器版 Fiddler
+
浏览器版 Mock Server

使用场景

例如：

测试环境子应用：

http://test-server:7101/*

重定向到：

http://localhost:5173/*

配置一条规则即可：

Source:
http://test-server:7101/*

Destination:
http://localhost:5173/$1

优点

功能最全面

不仅能重定向：

URL Redirect

还能：

修改响应
修改请求头
模拟接口
Mock数据

界面友好

所有配置均可视化。

不需要写代码。

适合：

• 前端开发
• 测试工程师
• 产品经理

支持团队共享

规则可以导出导入。

多人协作方便。

缺点

相对较重

插件体积较大。

功能很多但日常只用到一小部分。

规则管理复杂

项目多了以后：

规则A
规则B
规则C
规则D

容易混乱。

适用人群

推荐指数：

★★★★★

适合：

• 企业项目
• 微前端项目
• API调试
• 测试环境联调

二、Redirector

简介

Redirector 是一个经典的 URL 重定向插件。

它只做一件事：

URL A
↓

URL B

例如：

http://test-server:7101/*

替换成：

http://localhost:5173/*

优点

非常轻量

安装后几乎无感。

内存占用极低。

配置简单

一条规则即可：

Include:
http://test-server:7101/*

Redirect:
http://localhost:5173/$1

性能好

没有额外功能。

执行效率极高。

缺点

只能改URL

不能：

修改Header
修改Response
Mock接口

无法处理复杂逻辑

例如：

根据用户角色跳转
根据请求参数跳转

做不到。

适用人群

推荐指数：

★★★★☆

适合：

• 微前端联调
• 本地替换资源
• 简单开发场景

三、Tampermonkey

简介

Tampermonkey（油猴）本质上是：

浏览器脚本执行平台

通过 JavaScript 控制页面行为。

开发者可以编写脚本：

window.fetch
XMLHttpRequest
DOM
Cookie
LocalStorage

全部可以控制。

使用场景

例如：

拦截 fetch：

const oldFetch = window.fetch;

window.fetch = function (...args) {

    let url = args[0];

    if (url.includes("http://test-server:7101")) {

        args[0] = url.replace(
            "http://test-server:7101",
            "http://localhost:5173"
        );
    }

    return oldFetch.apply(this, args);
};

优点

灵活度最高

理论上：

浏览器能干的事
Tampermonkey都能干

可以只针对某个站点

例如：

// @match http://test-server:8080/*

只在当前系统生效。

可实现复杂逻辑

例如：

菜单A走本地
菜单B走测试环境
菜单C走预发布环境

都能实现。

方便增加开关

const DEBUG = true;

关闭即可恢复。

缺点

需要写代码

对于测试人员不太友好。

维护成本较高

项目升级后：

接口变了
页面变了
URL变了

脚本可能失效。

调试困难

复杂脚本容易出现兼容问题。

适用人群

推荐指数：

★★★★★

适合：

• 高级前端开发
• 微前端架构师
• 需要高度定制的场景

三者对比

我的建议

如果你是普通前端开发：

首选 Requestly

功能全面，开箱即用。

如果你只想：

测试环境子应用
↓
本地子应用

简单替换 URL：

首选 Redirector

轻量、稳定、够用。

如果你是高级开发人员，希望：

只替换某个菜单
动态切换环境
注入调试代码
修改接口返回

那么：

首选 Tampermonkey

自由度最高，没有天花板。

总结

对于微前端项目本地联调，我个人的选择顺序通常是：

1. Redirector（简单场景）
2. Requestly（团队开发）
3. Tampermonkey（复杂定制）

一句话总结：

Redirector = 最轻量

Requestly = 最省心

Tampermonkey = 最强大

根据团队规模和调试需求选择即可。