在Cypress中是否可拦截并修改请求体？需替换POST请求体实现Mock

Axios 拦截器方案 #

如果你的项目用Axios发起请求，直接用请求拦截器就能在发送前替换请求体：

• 先定义一个开关变量，再导入Mock数据（或从本地文件读取）：

// 控制Mock是否生效的开关
let enableMockRequestBody = false;
// 从本地JSON文件导入Mock数据
import mockPostData from './mock-post-body.json';

• 添加Axios请求拦截器，在请求发送前判断并替换：

axios.interceptors.request.use(config => {
  // 仅针对POST请求，且开关开启时替换请求体
  if (enableMockRequestBody && config.method?.toLowerCase() === 'post') {
    config.data = mockPostData;
    // 按需修改Content-Type，确保后端能正确解析
    config.headers['Content-Type'] = 'application/json';
  }
  return config;
}, error => {
  return Promise.reject(error);
});

• 给按钮绑定点击事件，切换Mock开关：

document.querySelector('#mock-toggle-btn').addEventListener('click', () => {
  enableMockRequestBody = !enableMockRequestBody;
  console.log(enableMockRequestBody ? '请求体Mock已开启' : '请求体Mock已关闭');
});

原生Fetch 封装方案 #

如果用原生Fetch，需要封装一层来实现请求体替换：

• 同样先定义开关和Mock数据：

let enableMockRequestBody = false;
let mockPostData = {};

// 提前加载Mock数据（也可以在按钮点击时动态加载）
fetch('./mock-post-body.json')
  .then(res => res.json())
  .then(data => mockPostData = data);

• 封装自定义Fetch函数，替换请求体逻辑：

function customFetch(url, options = {}) {
  // 仅针对目标POST请求替换请求体
  if (enableMockRequestBody && options.method?.toLowerCase() === 'post') {
    // 覆盖原请求体和请求头
    options.body = JSON.stringify(mockPostData);
    options.headers = {
      ...options.headers,
      'Content-Type': 'application/json'
    };
  }
  return fetch(url, options);
}

• 项目中所有请求都改用customFetch，按钮控制开关：

document.querySelector('#mock-toggle-btn').addEventListener('click', () => {
  enableMockRequestBody = !enableMockRequestBody;
  console.log(enableMockRequestBody ? '请求体Mock已开启' : '请求体Mock已关闭');
});

额外提示 #

• 可以针对特定接口做精准替换，比如在判断条件里加上config.url.includes('/api/submit')，只替换指定URL的请求体。
• 如果Mock数据需要动态生成，直接把mockPostData换成生成逻辑即可，不用依赖本地文件。

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