用5种方法修改接口响应

guojb824
1,773 阅读5分钟

在日常开发中，我们往往会遇到需要修改接口的 HTTP 状态码，响应头，响应体的场景。下面列出常用的几种方法。

mock 接口

在本地的 server，把接口 mock 掉。推荐一个三方库: mocker-api ，基于 webpack，支持热更新（保存 mock 数据时，server 自动加载修改后的 mock 数据）

20240720_205413_image.png

在 vue.config.js 中的配置如下：


const apiMocker = require('mocker-api');

devServer: {
  onBeforeSetupMiddleware({app}){
    apiMocker(app, path.resolve('./mock/index.js'), {
      proxy: {

      },
      changeHost: true,
    })
  }
}

mock 数据可以直接定义一个 json 对象：

'/res-json': {
    name: 'test',
    age: 18,
    sex: 'man',
  }

也可以使用 express 的风格，定义状态码，响应头，cookie，响应体

 '/res-redirect': (req, res) => {
    res.cookie('sessionId', '666');
    res.setHeader('Location', 'http://127.0.0.1:8081');
    res.status(302).send();
  },

效果

20240720_210000_image.png

注意：

cookie 需要使用 res.cookie 函数来定义，可以指定 cookie 的元数据，如：httpOnly 之类。

不建议使用 res.setHeader('Set-Cookie','xxx') 来设置 Set-Cookie 响应头。否则容易忘记设置 ; Path=/ 等参数，导致数据没有添加到浏览器 cookie 中。

20240720_212453_image.png

总结

优点缺点
可以热更新，不需要重启前端服务响应体数据是写死的，不能在已有数据的基础上修改少量字段。
需要修改 vue.config.js 的代码
使用场景

本地开发，无需真实数据时，修改 HTTP 请求

使用 http-proxy-middleware 来修改实际请求

如果通过本地 server 来转发请求到服务端，并且希望在已有数据的基础上做少量覆盖，可以通过 http-proxy-middleware 中间件来修改请求。

vue.config.js 配置如下：

const { createProxyMiddleware } = require('http-proxy-middleware');

const apiProxy = createProxyMiddleware({
  target: 'http://localhost:3000',
  changeOrigin: true,
  on: {
    proxyRes: (proxyRes, req, res) => {
      res.cookie('sessionId', '666');
      res.setHeader('Location', 'http://127.0.0.1:8081');
      res.status(302).send();
    },
  },
});

module.exports = defineConfig({
  devServer: {
    compress: false,
    onBeforeSetupMiddleware({ app }) {
      app.use('/res-proxy', apiProxy);
    },
})

效果

原接口响应：

20240720_212118_image.png

20240720_212149_image.png

修改后的接口响应：

20240720_212255_image.png

总结

优点缺点
可以基于真实数据来修改不能热更新
需要修改 vue.config.js 的代码
使用场景

需要基于真实数据来调试时，可以使用 http-proxy-middleware 覆盖接口的响应。

使用 Chrome 开发者工具来覆盖请求

新版的 Chrome 开发者工具 提供了覆盖 HTTP 请求的 header 字段的能力。

详细的使用说明，见 官方文档

配置

在需要覆盖的请求上右击鼠标，选择 "Override headers" 或者 "Override content" ，来覆盖响应头或者响应体。

覆盖响应头

新建响应头字段

点击 "Add header"，输入新的响应头字段和值。

修改响应头字段

已有的响应头字段可以编辑

发起请求，发现响应头加了新字段。刷新浏览器，效果仍然存在。

20240720_235917_image.png

覆盖响应体

第一次操作时，浏览器会询问文件保存位置，以及请求对文件夹授权。

如果覆盖响应体，在 Sources - Overrides 会出现一个文件，可以直接编辑，编辑完后 ctrl + S 保存即可。

保存后，Network 左边会出现感叹号，表示有请求被覆盖。

20240720_235207_image.png

发起请求，发现响应体已被替换。刷新浏览器，效果仍然存在。

20240720_235717_image.png

当不需要覆盖时，把勾去掉即可。

20240721_003943_image.png

注意

  1. 已有的响应头字段不能删除，不能修改字段名，只能修改字段值，或者增加新字段。
  2. HTTP 状态码不能覆盖（只有响应头和响应体可以覆盖，其他如 genernal 和 请求头、请求体都不能覆盖）
  3. 增加的新字段，字段名和值都可以修改和删除。

总结

优点缺点
chrome 浏览器自带功能，任意网址都能使用;非侵入式，无需修改源代码不能修改http状态码，以及其他 general 下的字段
响应头，响应体都能覆盖

使用场景

需要覆盖响应头、响应体，但是不能借助本地 server 时使用。

比如，在调试 CORS 跨域，或者 SSO 单点登录时，用这种办法比较快捷。

使用 Chrome 插件修改接口的响应

可以借助 Chrome 插件来 mock 或者修改接口。

e.g. tweak

注意：

有些插件分免费版和收费版，部分特性，比如：修改接口的响应，会放到收费版中。免费版只能 mock 接口。

使用 Fiddler 拦截请求

这是最古老的一种修改请求的方式。

通过抓包来实现：修改本地的 hosts 文件，让所有 HTTP 请求都通过 Fiddler 服务转发，进而能够拦截并修改请求。

Fiddler 有两种方式拦截请求：AutoResponder 和 FiddlerScript。FiddlerScript 需要自行编写脚本，比较繁琐；所以，为了简单，这里只讲解 AutoResponder 的使用。

配置

打开 Fiddler 的 AutoResponder，勾选 Enable rules 和 Unmatched requests passthrough，启用拦截功能，并且将过滤掉的请求全部透传。

20240721_010523_image.png

这时发起请求，可以在左侧请求列表中看到新发出的请求。

20240721_011037_image.png

把这个请求拖动到右边，可以看到新创建的一条规则。

20240721_011126_image.png

右击这个规则，选择 "Edit response"，出现弹窗。

弹窗中选择 Raw, 可以看到原始的 HTTP 请求报文。

根据实际需要修改 HTTP 状态码、请求头字段、请求体内容，点击"保存"

20240721_011609_image.png

再次发起请求，发现请求已经被修改。

20240721_011636_image.png

总结

优点缺点
功能强大，任何网址的请求都能拦截和Chrome 开发者工具相比，配置稍显麻烦。
非侵入式，无需修改源代码

使用场景

任何时候都能使用。

avatar
文章
阅读
粉丝