Grok API离线模拟器：在无网络情况下进行前端联调的工具-人工智能-PHP中文网

需在离线环境联调grok api，通过创建grok-mock-rules.json定义响应规则，用json-server或python启动mock服务，配置vite代理并禁用sdk网络探测，最终验证fetch调用返回预设json。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

grok api离线模拟器：在无网络情况下进行前端联调的工具

你需要在无网络环境下完成前端对Grok API的联调测试，但官方SDK强制校验网络连通性、自动下载远程模型配置、校验Token有效性——这些行为在离线时全部失败。

准备离线响应规则集

创建一个名为grok-mock-rules.json的本地文件，内容必须包含三个核心字段：status（整数HTTP状态码）、body（字符串JSON结构）、headers（键值对对象）。例如模拟成功响应：{"status":200,"body":"{\"id\":\"cmpl-123\",\"choices\":[{\"message\":{\"content\":\"Hello\"}}]}","headers":{"Content-Type":"application/json; charset=utf-8"}}。

必须严格使用双引号包裹所有键名和字符串值，单引号或省略引号会导致解析失败。这一步不能跳过，否则后续Mock Server无法加载规则。

启动轻量级离线Mock服务

方法一：用Node.js快速起服务（推荐）
安装json-server：执行npm install -g json-server→运行json-server --watch grok-mock-rules.json --port 8081 --routes routes.json。

方法二：零依赖Python方案
新建mock_server.py，写入12行标准http.server代码，监听localhost:8081，对所有/v4/chat/completions路径返回预设JSON响应体。这一步操作起来很简单，直接把文件拖进去就行。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

【关键前提】必须将Python脚本中self.send_header('Access-Control-Allow-Origin', '*')和self.send_header('Content-Type', 'application/json; charset=utf-8')两行写在do_POST方法内，漏掉任一header会导致前端fetch解析失败或跨域拦截。

前端无缝切换至离线Mock地址

第一步：修改Webpack/Vite开发服务器代理配置
在vite.config.ts中找到server.proxy字段，将原/v4前缀转发目标从https://api.x.ai改为http://localhost:8081。

第二步：禁用SDK内置网络探测逻辑
在项目入口文件顶部插入全局变量覆盖：window.XAI_OFFLINE_MODE = true;→在SDK初始化前，手动重写window.fetch函数，对含api.x.ai的URL直接返回mock_server.py响应。

第三步：验证端到端链路
启动Vite开发服务→打开浏览器控制台→执行fetch('/v4/chat/completions', {method:'POST', body:JSON.stringify({model:'grok-beta',messages:[{role:'user',content:'hi'}]})})→确认响应体与grok-mock-rules.json中定义一致。