Ajax Interceptor Tools：拦截ajax请求并修改请求、响应信息使用这个插件，你可以通过 JSON 或

写了一个 Chrome 插件Ajax Interceptor Tools，使用这个插件，你可以通过 JSON 或 JavaScript 代码片段来编辑并修改响应结果，还支持使用 Mock.js 语法生成随机数据。另外还可以修改请求地址、请求头等内容，并且插件支持分组、导入/导出规则配置等。

使用

一、修改Response响应结果

在Response编辑器中，您可以选择：
1、使用JSON/JavaScript格式编辑响应结果
2、转发原始响应结果（如果清空Response编辑器，将会把原始响应结果转发给应用程序）

1、使用JSON格式编辑响应结果

示例：

{
  "status": 200,
  "response": "OK"
}

2、使用JavaScript格式编辑响应结果

使用JS方式编辑响应结果时，通过new Function(responseText)生成函数并执行，响应结果即为函数的返回值。

2.1. 简单JavaScript片段

示例：

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({ id: i });
}
return {
  "status": 200,
  "response": data
}

2.2. 使用 mock.js 生成随机数据

示例：

const data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
});
return {
  "status": 200,
  "response": data
}

将生成类似以下数据：

// ==>
{
    "list": [
        {
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 3
        }
    ]
}

2.3. 从arguments获取原始数据，简单编程创建场景

示例：

let { method, payload, originalResponse } = arguments[0];
if (method === 'get') { // 请求方式
  // do something
}
if (payload) { // 入参 { queryStringParameters，requestPayload }
  // do something
}
return {
  "status": 200,
  "response": originalResponse
};

二、修改Request请求信息

在Request面板中，您可以选择修改请求URL、method、headers和payload。

1. 修改请求URL和method

例下图中，将会把匹配到的/auth/login请求路径替换为/auth/login2，并把请求方法改为POST，您可以打开devtools在Network面板中看到替换后的请求。

2. 修改请求headers

例下图中，将会把请求headers中的Content-Type替换为application/json。

3. 修改请求payload

例下图中，将会在入参中新增test: test123，您可以打开devtools在Network面板中看到请求体的修改。

三、支持导入/导出

四、新增declarativeNetRequest配置页面，支持使用指定声明性规则来阻止或修改网络请求

你可以通过配置阻止/重定向请求、配置响应头支持跨域等。
文档：declarativeNetRequest Documentation

重定向请求示例

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "redirect",
      "redirect": {
        "transform": {
          "host": "new.react.docschina.org",
          "scheme": "https"
        }
      }
    },
    "condition": {
      "urlFilter": "main",
      "domains" : ["react.docschina.org"],
      "resourceTypes": ["script"]
    }
  }
]

配置响应头支持跨域示例

[
  {
    "action": {
      "responseHeaders": [
        {
          "header": "Access-Control-Allow-Origin",
          "operation": "append",
          "value": "https://react.docschina.org"
        },
        {
          "header": "Access-Control-Allow-Headers",
          "operation": "append",
          "value": "Content-Type"
        }
      ],
      "type": "modifyHeaders"
    },
    "condition": {
      "resourceTypes": [
        "xmlhttprequest"
      ],
      "urlFilter": "localhost:8080"
    },
    "id": 1,
    "priority": 1
  }
]

下载

项目地址：github.com/PengChen96/…
谷歌商店：chrome.google.com/webstore/de…

Ajax Interceptor Tools：拦截ajax请求并修改请求、响应信息

使用