使用mockttp注入JavaScript到网页时遇报错，求解决方案

错误原因 #

报错Cannot read properties of undefined (reading 'replace')是因为res.body.text为undefined，主要有两个场景：

• 请求的响应不是文本类型（比如图片、二进制文件、非HTML资源），这类响应没有text属性
• 即使是HTML响应，mockttp可能未自动将响应体解析为文本格式

修复方案 #

1. 过滤仅处理HTML响应 #

只对Content-Type包含text/html的响应做注入操作，避免处理非文本资源：

const INJECT = "<script src='https://example.com/googletranslate.js'></script>";

await server.forAnyRequest().thenPassThrough({
    beforeResponse: async (res) => {
        // 仅处理HTML类型的响应
        const contentType = res.headers['content-type'] || '';
        if (!contentType.includes('text/html')) return res;

        // 手动解析响应体为文本
        let bodyText;
        try {
            bodyText = await res.body.getText();
        } catch (e) {
            // 解析失败则返回原响应
            return res;
        }

        // 注入脚本到<head>标签后
        const newBody = bodyText.replace("<head>", `<head>${INJECT}`);
        return {
            ...res, // 保留原响应的状态码、请求头等属性
            body: newBody
        };
    }
});

2. 兼容标签大小写 #

部分页面的<head>标签可能是大写<HEAD>，用正则忽略大小写适配：

const newBody = bodyText.replace(/<head>/i, `<head>${INJECT}`);

3. 保留原响应状态码 #

不要硬写status: 200，否则会把404、500等异常响应强制改成200，导致页面逻辑异常。

额外注意事项 #

• 检查注入脚本的URL拼写（你代码里的examlple.com是拼写错误，应为example.com）
• 若遇到压缩后的HTML，mockttp会自动解压，特殊编码场景需手动指定编码格式

内容的提问来源于stack exchange，提问作者MyTechGui S