2025年了，前端谁还用传统的 PostMan 或 ApiFox

前端什么时候会用PostMan 或 ApiFox

查看后端定义的接口
开发前发送请求，测试后端的接口是否正常
前端逻辑复杂，要走到某一个请求的链路过长，通过PostMan 或 ApiFox 能快速重复发送请求，方便联调测试
对于一些非正常业务情况下的数据更改请求，如想从状态 b到 a, 而正常的业务请求只能 a 到 b
AI 编程中，需要复制接口的定义给到 AI 让 AI理解我们的数据。

前端用PostMan 或 ApiFox 有什么问题

测试接口的时候，需要复制 header 中的 token的登录信息,需要复制一堆的 cookie；
无法保证浏览器与PostMan 或 ApiFox 信息一致，有些时候明明header和 cookie 信息都一致了，但还是没有预期效果
构建请求信息繁琐，需要从浏览器中复制过去，但有些时候请求信息来源多样，即有 body 信息又有 path和 params 信息，需要反复的检证
AI 编程中，复制接口定义要相对繁琐，在两个工具中反复的复制信息，影响开发连贯性与效率

除了PostMan 或 ApiFox 有没有更好的工具选择

我们想要工具，希望他是轻量的，并且能解决上面提到的所有问题，这里推荐一个工具mocxykit，他是一个 webpack 或 vite 的插件，只需要两行代码就能集成到项目中。本身也是一个 mock数据及代理的管理工具

mocxykit的主要功能

代理请求和 MOCK数据
可视化的管理 MOCK 数据及代理功能
代理支持全局代理和某一个 URL 的自定义代理
可随时切换某一个URL进行代理转发或 MOCK 数据
可通过不同的入参，返回不同的MOCK 数据
可以快速把最近的请求返回的数据，存为 MOCK 数据
支持 faker 随机MOCK数据生成
支持多环境变量管理，随时切换环境变量
支持 Ngrok 公网访问
支持 MCP 协议，让 AI 编程时，自动获取 MOCK 数据或最近浏览器请求的数据
内置API请求工具，可直接发送和测试API请求

安装mocxykit

首先先安装这个插件

css 复制代码

npm install mocxykit --save-dev

然后以 vite 为例，改变vite.config.js(如果没有这个文件，可以在根目录创建下) 的配制，添加这个插件

js 复制代码

import { defineConfig } from 'vite'
import { viteProxyMockPlugin } from 'mocxykit'

export default defineConfig({
  plugins: [
    viteProxyMockPlugin()
  ]
})

首先先安装这个插件

css 复制代码

npm install mocxykit --save-dev

然后以 vite 为例，改变vite.config.js(如果没有这个文件，可以在根目录创建下) 的配制，添加这个插件

js 复制代码

import { defineConfig } from 'vite'
import { viteProxyMockPlugin } from 'mocxykit'

export default defineConfig({
  plugins: [
    viteProxyMockPlugin()
  ]
})

首先先安装这个插件

css 复制代码

npm install mocxykit --save-dev

然后以 vite 为例，改变vite.config.js(如果没有这个文件，可以在根目录创建下) 的配制，添加这个插件

js 复制代码

import { defineConfig } from 'vite'
import { viteProxyMockPlugin } from 'mocxykit'

export default defineConfig({
  plugins: [
    viteProxyMockPlugin()
  ]
})