如何在Chrome中拦截修改服务器响应，返回401/403以获取验收截图？

背景说明 #

我们正在调整处理服务器返回401/403错误的前端显示逻辑，代码如下：

export const handleStatusCodeMessage = (errorStatusCode, verbiageConfig, errorStatusMessage) => {
    let {errorType, errorMessage} = '';
    switch (errorStatusCode) {
        case '401':
            if (isMember()) {
                errorType = GENERAL_ERROR.ERROR_TYPE;
                errorMessage = GENERAL_ERROR.ERROR_MESSAGE + getVerbiageTrailMessage(verbiageConfig);
            } else {
                errorType = UNAUTHORIZED.ERROR_TYPE;
                errorMessage = UNAUTHORIZED.ERROR_MESSAGE;
            }
            break;
        case '403':
            if (isMember()) {
                errorType = GENERAL_ERROR.ERROR_TYPE;
                errorMessage = GENERAL_ERROR.ERROR_MESSAGE + getVerbiageTrailMessage(verbiageConfig);
            } else {
                errorType = UNAUTHORIZED.ERROR_TYPE;
                errorMessage = UNAUTHORIZED.ERROR_MESSAGE;
            }
            break;
        case 'etc': // other cases
    }
    return {errorType, errorMessage};
};

为满足银行业验收标准，需要获取代码修改前后401、403状态对应的页面截图，因此需要在Chrome中拦截服务器响应，手动修改状态码后返回给浏览器。

方法一：使用Chrome DevTools本地覆盖（Local Overrides） #

适合需要长期固定修改某一接口响应的场景，步骤如下：

• 打开Chrome DevTools（快捷键F12或Ctrl+Shift+I），切换到Sources面板
• 在左侧导航栏找到Overrides选项，点击Select folder for overrides，选择本地一个空文件夹用于存放覆盖文件
• 勾选Enable local overrides，浏览器会提示授权文件访问权限，点击允许
• 切换到Network面板，刷新页面，找到需要拦截的目标接口
• 右键该接口，选择Save for overrides，此时该接口的响应会保存到你选择的本地文件夹中
• 回到Sources面板，在Overrides下找到刚才保存的接口文件，右键选择Edit
• 修改文件头部的状态码：将原状态码（比如200）改为401或403，保存修改
• 再次刷新页面，浏览器会加载本地修改后的响应，此时就能看到对应状态码的页面显示，直接截图即可
• 重复修改状态码为另一个值（401/403互换），完成另一种情况的截图

方法二：使用Network面板临时修改响应 #

适合单次临时验证的场景，步骤如下：

• 打开Chrome DevTools，切换到Network面板，勾选Disable cache（避免缓存影响）
• 刷新页面，找到目标接口，右键选择Block request domain（可选，防止真实接口返回干扰）
• 右键目标接口，选择Copy > Copy as fetch
• 切换到Console面板，粘贴刚才复制的fetch代码
• 修改fetch请求的响应处理部分，手动返回指定状态码：
  示例修改后的代码：

  fetch('目标接口URL', {原请求参数})
    .then(() => {
      // 手动构造401响应
      return new Response('', {status: 401, statusText: 'Unauthorized'});
    })
    .then(res => res.text())
    .then(console.log);
  

• 执行修改后的代码，页面会触发对应的错误处理逻辑，此时截图即可
• 重复修改状态码为403，完成另一种情况的验证截图

方法三：使用DevTools重写规则（Rewrite Rules） #

适合批量拦截多个接口并修改状态码的场景，步骤如下：

• 打开Chrome DevTools，点击右上角设置图标（⚙️），选择Experiments，确保Rewrite Rules已启用（若未启用，勾选后重启DevTools）
• 回到DevTools主界面，切换到Network面板，点击顶部的Rewrite选项卡
• 点击Add rule，配置规则：
  • 在Filter中填写目标接口的URL（支持通配符，比如*://your-domain.com/api/*）
  • 在Modify response区域，选择Status code，输入401或403
• 勾选该规则，刷新页面，所有匹配的接口都会返回指定状态码，此时截图即可
• 修改规则中的状态码为另一个值，刷新页面完成另一种情况的截图

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