如何Mock API响应并在服务端原有响应中追加新字段以推进开发？

一、前端本地Mock拦截（适合前端独立开发） #

直接在请求层拦截目标接口的响应，补全缺失字段就行。比如用Axios拦截器的示例：

import axios from 'axios';

axios.interceptors.response.use(
  response => {
    // 匹配目标接口地址
    if (response.config.url.includes('https://www.example.api/feature')) {
      // 给响应数据追加缺失的keyTwo字段
      response.data.keyTwo = 'valueTwo';
    }
    return response;
  },
  error => Promise.reject(error)
);

配置后，前端发起请求时会自动补全响应结构，完全不影响后续业务逻辑开发。

二、本地Mock服务器（适合前后端联调前的模拟） #

用Node.js+Express快速搭个本地Mock服务器，先拉取真实后端的响应，再补全字段返回给前端：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/feature', async (req, res) => {
  try {
    // 调用真实后端接口拿原始数据
    const realRes = await axios.get('https://www.example.api/feature');
    // 合并原始数据和缺失字段后返回
    res.json({
      ...realRes.data,
      keyTwo: 'valueTwo'
    });
  } catch (err) {
    res.status(500).json({ error: 'Mock服务器请求真实接口失败' });
  }
});

app.listen(3000, () => {
  console.log('Mock服务器运行在 http://localhost:3000');
});

之后前端把请求地址改成http://localhost:3000/feature，就能拿到补全后的响应。等后端接口开发完，直接切回真实地址就行。

三、代理层修改响应（适合团队统一配置） #

如果是团队协作，可在Nginx这类代理工具里配置规则，自动补全响应字段：

location /feature {
  proxy_pass https://www.example.api/feature;
  # 替换响应内容，追加keyTwo字段
  sub_filter '{"keyOne": "valueOne"}' '{"keyOne": "valueOne", "keyTwo": "valueTwo"}';
  sub_filter_once on;
}

这种方式不用改前端或后端代码，团队统一配置后所有人都能拿到补全后的响应。

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