在谷歌浏览器中怎么拦截并修改特定的Ajax接口请求数据？

作者：袖梨 2026-06-16

使用Ajax Interceptor可精准拦截并重写HTTP响应：安装扩展后启用拦截，添加URL匹配规则，在Response中配置JSON或JavaScript动态生成模拟数据，支持基于原始响应改写或Mock.js随机生成，调试完成后需手动关闭拦截。

当你需要在前端调试中临时替换后端返回的JSON数据、复现某个报错场景，或测试接口异常响应（如404、500、空数组）时，必须让浏览器发出请求但把原始响应“换成”你指定的内容——这不能靠Network面板禁用请求实现，而要精准拦截并重写响应体。

安装并启用Ajax Interceptor扩展

打开 Chrome 浏览器，在地址栏输入 chrome://extensions/ 进入扩展管理页。

右上角开启「开发者模式」开关。

将下载好的 ajax-interceptor 插件文件夹（含 manifest.json）直接拖入页面空白处完成安装。

安装后刷新一次页面，点击工具栏上的 Ajax Interceptor 图标，点击弹窗中的 Enable Interception 按钮激活拦截功能。

添加规则：匹配URL并修改响应内容

点击扩展图标→进入主界面→点击左上角「+ Add Rule」按钮。

在 URL 输入框中填入目标接口完整路径，例如：https://api.example.com/user/profile；支持通配符，如 /api/v2/*/list。

切换到「Response」标签页，选择「JSON」格式，在编辑区输入你想要返回的模拟数据，比如：
{"code":200,"data":{"id":123,"name":"测试用户","role":"admin"}}。

点击右下角「Save」保存规则。此时该 URL 的所有后续请求都会被拦截，返回你写的 JSON，且前端 JavaScript 读取到的就是这个伪造响应——Network 面板里仍显示原始服务器返回的真实数据，二者互不干扰。

进阶操作：用 JavaScript 动态生成响应

方法一：基础 JS 返回固定结构
在 Response 编辑区切换为「JavaScript」模式，输入：
return { status: 200, data: Array.from({length: 5}, (_, i) => ({ id: i + 1, title: `文章${i + 1}` })) };

方法二：基于原始响应做条件改写
使用 arguments[0] 获取原始响应对象，例如过滤掉敏感字段：
let { originalResponse } = arguments[0];
try {
  const json = JSON.parse(originalResponse);
  delete json.token;
  delete json.sessionId;
  return { ...json };
} catch(e) { return originalResponse; }

方法三：调用 Mock.js 生成随机列表（需插件已内置 Mock.js 支持）
const data = Mock.mock({ 'list|3-8': [{ 'id|+1': 1, 'name': '@cname', 'age|18-60': 1 }] });
return { code: 200, data: data.list };