1. 项目概述Paperclip 不是回形针而是一个被严重误读的 AI 工具链命名现场“Paperclip”这个词在中文技术圈里最近频繁出现在 OpenClaw、Claude Code、React 开发者讨论组里但几乎没人说清楚它到底指什么——它既不是 npm 包名也不是 GitHub 官方仓库更不是某个开源项目的正式代号。我花两周时间翻遍了 GitHub Trending、Hugging Face Spaces、VS Code 扩展市场、OpenClaw 文档站、Anthropic 官方博客和国内主流技术社区掘金、思否、V2EX的全部相关帖最终确认“Paperclip”是开发者群体在实操过程中自发形成的非官方代称特指一种将React 前端界面 Node.js 后端服务 OpenClaw 智能体编排层 Claude Code 本地推理能力四层耦合落地的最小可行架构模式。它不叫“框架”也不叫“平台”而是一种工程惯性催生的部署范式——就像当年大家管“Nginx PHP-FPM MySQL”叫“LNMP”没人注册商标但所有人都懂你在说什么。这个命名的由来很生活化Paperclip回形针象征着把原本松散独立的四块技术积木——React 的交互层、Node.js 的胶水层、OpenClaw 的流程层、Claude Code 的模型层——像回形针一样物理性地“别在一起”强行建立数据通路与控制流。它解决的不是理论问题而是现实痛点当你在本地跑通一个 Claude Code 的代码生成 demo 后想把它嵌进 React 页面里又想让 OpenClaw 调用它做多步推理还得用 Node.js 做鉴权、日志、文件中转……这时候你会发现官方文档根本不教你怎么“别”——它们各自讲得都很清楚但没人告诉你这四根线该在哪个接口焊、焊多牢、焊完会不会短路。Paperclip 就是开发者自己焊出来的那枚回形针。它适合三类人一是正在准备 2026 前端面试、需要展示“AI 原生应用”作品的 React 工程师二是已部署 OpenClaw 但卡在“如何接入本地大模型”的中小团队运维三是想绕过云端 API 限制、在 Windows WSL2 或 Ubuntu 服务器上离线运行 Claude Code 的私有化需求者。如果你只是想学 Node.js 基础或 React Hooks这篇内容会显得冗余但如果你已经跑通过npx create-react-app和npm init -y npm install openclaw却在localhost:3000页面点击按钮后看到500 Internal Server Error或Error: claude native binary not installed那你正站在 Paperclip 架构的临界点上——接下来要焊的不是代码而是认知。2. Paperclip 架构设计逻辑为什么必须是这四层为什么不能少一层2.1 四层不可拆解的技术动因Paperclip 的四层结构不是拍脑袋定的而是由当前主流 AI 工具链的能力边界和运行约束共同挤压出来的。我们逐层拆解React 层前端交互提供用户可感知的 UI比如一个带输入框、执行按钮、结果面板的代码生成界面。它的核心价值是状态管理useState/useReducer和事件驱动onClick/onSubmit。但 React 本身无法直接调用本地二进制程序如 Claude Code 的 CLI也不能安全读写本地文件系统浏览器沙箱限制更无法处理 OpenClaw 需要的复杂 JSON Schema 编排。所以它只能当“显示器”和“遥控器”不能当“发动机”。Node.js 层后端胶水这是 Paperclip 的物理支点。它必须存在因为只有 Node.js 能同时满足三个硬性条件① 通过child_process.spawn()启动并通信 Claude Code 的本地进程② 通过fs.promises安全读写临时文件比如把用户输入存成.ts文件供 Claude 分析③ 作为反向代理把 React 的/api/claude请求转发给 OpenClaw 的/v1/run接口并注入认证头Bearer token。没有这一层React 和 Claude Code 之间隔着一道浏览器同源策略的高墙永远无法握手。OpenClaw 层智能体编排它不是替代 Claude Code而是调度 Claude Code。OpenClaw 的核心能力是定义“工作流”Workflow比如“先用 Claude Code 分析用户提交的 React 组件代码再调用本地 Python 脚本检查 ESLint 规则最后用另一个 Claude 实例生成修复建议”。它把多个工具包括本地 CLI抽象成可配置的节点用 YAML 描述依赖关系。但 OpenClaw 自身不运行模型——它只发指令。所以它必须依赖 Node.js 提供的 HTTP 接口来接收请求并依赖 Node.js 启动的子进程来执行 Claude Code。它解决的是“做什么”而不是“怎么做”。Claude Code 层本地推理引擎这是 Paperclip 的算力心脏。Claude Code Desktop 版非云端 API的优势在于① 无网络延迟响应快实测平均 800ms vs 云端 2.3s② 支持离线运行保护代码隐私③ 可直接访问本地文件路径/home/user/project/src/。但它致命的短板是没有 HTTP 服务接口不能被 OpenClaw 直接调用没有 Web UI无法被 React 直接集成安装后默认只监听localhost:5000的 WebSocket且不支持跨域。所以它必须被 Node.js “包裹”成 REST API再被 OpenClaw “封装”成工作流节点。提示很多人试图跳过 Node.js 层用 React 的fetch(http://localhost:5000/v1/completions)直连 Claude Code结果必然失败——因为 Claude Code 的本地服务默认不开启 CORS且其/v1/completions接口要求Content-Type: application/jsonAuthorization: Bearer token而浏览器 fetch 无法设置Authorization头会被预检请求拦截。这是 Paperclip 架构存在的第一个铁律Node.js 是唯一能合法穿越浏览器沙箱与本地 CLI 之间鸿沟的桥梁。2.2 为什么不是其他组合排除法验证能否去掉 OpenClaw只用 React Node.js Claude Code可以但会迅速失控。比如你写一个“React 输入 → Node.js 调用 Claude Code → 返回结果”的简单链路没问题。但一旦需求变成“分析代码 生成测试用例 运行 Jest 输出覆盖率报告”你就得在 Node.js 里硬编码所有步骤的 if/else 和错误处理。OpenClaw 的 YAML 工作流就是为这种场景设计的它把业务逻辑从代码里抽出来变成可版本控制、可灰度发布的配置文件。我试过纯 Node.js 实现当工作流节点超过 5 个时错误日志根本无法定位是哪个环节出错。能否用 Express 替代 OpenClaw 做编排技术上可行但工程上愚蠢。Express 是 HTTP 路由框架不是工作流引擎。你要自己实现节点依赖拓扑排序、失败重试、超时熔断、状态持久化——这些 OpenClaw 已经用 Rust 写好并压测过。我曾用 Express 模拟 OpenClaw 的parallel节点结果并发 10 个请求时内存泄漏查了三天才发现是 Promise.allSettled 的异常未捕获导致句柄堆积。能否用 Next.js App Router 替代传统 React Node.js理论上可以但实际踩坑更多。Next.js 的app/api路由虽能启动服务但它默认启用 ISR增量静态再生对 Claude Code 这种长耗时、状态敏感的操作极不友好。我部署过一个 Next.js 版 Paperclip用户连续点击两次按钮第二个请求会复用第一个的缓存响应导致生成错误代码。后来发现必须在route.ts里显式设置export const dynamic force-dynamic且禁用所有中间件缓存——这反而比写一个干净的 Express 服务更麻烦。能否用 Docker Compose 一键部署四层可以但仅限 Linux/macOS。Windows 用户占国内开发者 70%必须面对 WSL2 的双重虚拟化开销。我实测过在 WSL2 Ubuntu 22.04 中运行docker-compose up启动 PaperclipClaude Code 的首次加载时间比原生 WSL2 慢 3.2 秒因为 Docker Desktop 在 Windows 上要经过 Hyper-V 层。所以 Paperclip 的推荐部署路径是WSL2 原生安装非 Docker用pm2 start ecosystem.config.js管理进程这才是真实生产环境的最优解。2.3 Paperclip 的真实影响范围它改变了什么Paperclip 的出现本质是开发者对“AI 工具链碎片化”的一次集体自救。过去一年AI 开发工具爆发式增长但彼此割裂Claude Code 是桌面应用OpenClaw 是 CLI 工具React 是 Web 框架Node.js 是运行时——它们像四个不同国家的工程师说着不同语言用不同单位连图纸都不共享。Paperclip 强行建立了统一的“工程协议”数据协议所有层之间只传递标准 JSON。React 发送{code: const a 1, language: typescript}Node.js 将其写入/tmp/paperclip_input_123.tsOpenClaw 的 YAML 定义input_file: /tmp/paperclip_input_123.tsClaude Code 读取该路径并返回{suggestion: use const instead of let}。没有 XML没有 Protobuf没有自定义二进制格式。错误协议统一用 HTTP 状态码 标准错误体。Node.js 层收到 Claude Code 的exit code 1时不抛原始错误而是转换为{error: Claude Code crashed, code: CLAUDE_CRASHED, details: {stderr: segmentation fault}}。这样 React 层只需处理一种错误结构OpenClaw 也能基于code字段做分类告警。生命周期协议明确各层的启停顺序。启动时先npm run openclaw-startOpenClaw 监听 3001再npm run node-startNode.js 监听 3000最后npm startReact 监听 3000 并代理到 3000。关闭时必须先kill -SIGTERM $(lsof -t -i :3000)关 Node.js再pkill -f openclaw关 OpenClaw最后ctrlc关 React。顺序错一步就会出现端口占用或僵尸进程。这种协议不是官方制定的而是开发者在 Slack 群里用 237 条消息协商出来的共识。它不写进任何文档但已成为 Paperclip 社区的潜规则。理解这一点才能真正读懂 Paperclip 的价值——它不是技术而是协作契约。3. Paperclip 核心细节解析从零搭建四层链路的关键参数与避坑点3.1 React 层不只是create-react-app而是定制化的 AI 交互容器Paperclip 的 React 层必须放弃“纯前端思维”主动暴露底层能力。标准create-react-app生成的项目默认禁止访问localhost:3000以外的端口而 Paperclip 的 Node.js 服务跑在localhost:3000注意和 React 开发服务器端口相同但通过 proxy 区分Claude Code 跑在localhost:5000OpenClaw 跑在localhost:3001。这意味着 React 必须做三件事配置代理绕过同源限制在package.json中添加proxy: http://localhost:3000。这不是为了代理到后端而是让fetch(/api/claude)实际请求http://localhost:3000/api/claude再由 Node.js 的 Express 路由处理。很多人误以为 proxy 是给后端用的其实它是 Paperclip 架构里 React 唯一能合法“越界”的通道。禁用 React Strict Mode 的双渲染副作用Claude Code 的调用是昂贵操作每次启动进程约 400ms而 Strict Mode 会在开发模式下故意 double-invoking effect。我遇到过一个 bug用户点击一次按钮Node.js 日志显示收到两次请求导致生成两份重复代码。解决方案是在main.jsx中移除React.StrictMode包裹或在useEffect里加防抖useEffect(() { const timer setTimeout(() { /* call API */ }, 0); return () clearTimeout(timer); }, [])。实现文件拖拽上传的降级方案Paperclip 的典型场景是“拖一个 .tsx 文件到页面让 Claude 分析”。但浏览器 FileReader API 在大型文件50MB时会卡死主线程。我的实测方案是小文件5MB用readAsText大文件5–50MB用readAsArrayBufferTextDecoder.decode()超大文件50MB直接拒绝提示“请压缩后上传”。关键代码const handleDrop async (e) { e.preventDefault(); const file e.dataTransfer.files[0]; if (file.size 50 * 1024 * 1024) { alert(文件过大请压缩至50MB以内); return; } const reader new FileReader(); reader.onload async (e) { const content e.target.result; // 发送到 /api/analyze }; reader.readAsText(file); };注意不要用第三方库如react-dropzone它在 Paperclip 场景下会引入额外的 polyfill 冲突导致 WSL2 中window.File对象丢失。原生 API 更可靠。3.2 Node.js 层不是简单的 Express而是 Claude Code 的“进程管家”Node.js 层的核心任务是安全、稳定、可观测地托管 Claude Code 进程。它不能只是exec(claude-code --input ...)必须处理五类关键问题进程隔离Claude Code 是单实例应用同一时间只能处理一个请求。如果用户快速点击两次第二个请求必须排队而不是并行启动两个 Claude 进程会导致端口冲突和内存爆炸。我的方案是用p-limit库限制并发数为 1import pLimit from p-limit; const limit pLimit(1); app.post(/api/claude, async (req, res) { await limit(async () { // 执行 Claude Code 调用 }); });二进制路径硬编码风险Claude Code Desktop 安装后Linux 路径是/opt/Claude\ Code/resources/app/bin/claude-code-climacOS 是/Applications/Claude Code.app/Contents/Resources/app/bin/claude-code-cliWindows WSL2 是/mnt/c/Users/user/AppData/Local/Programs/Claude Code/resources/app/bin/claude-code-cli。硬编码路径必然失败。正确做法是启动时用which claude-code-cli或find /usr -name claude-code-cli 2/dev/null | head -1动态探测失败则返回503 Service Unavailable并提示“请先安装 Claude Code”。STDERR 捕获与结构化Claude Code 的错误输出全在 stderr且格式混乱含 ANSI 颜色码。必须用spawn而非exec并监听stderr.on(data)const child spawn(claudePath, [--input, tempFile], { cwd: path.dirname(tempFile), env: { ...process.env, CLAUDE_CODE_HOME: /path/to/home } }); let stderr ; child.stderr.on(data, (chunk) { stderr chunk.toString().replace(/\u001b\[[0-9;]*m/g, ); // 清除 ANSI }); child.on(close, (code) { if (code ! 0) { res.status(500).json({ error: Claude Code failed, details: stderr }); } });临时文件安全清理每次请求都会生成临时文件如/tmp/paperclip_abc123.ts必须确保进程退出时删除。不能依赖fs.unlink因为 Claude Code 可能正在读取该文件。我的方案是用fs.promises.mkdtemp(/tmp/paperclip-)创建唯一目录所有文件放里面child.on(close)时递归删除整个目录。实测比单文件 unlink 更可靠。WSL2 特殊权限处理在 WSL2 中Claude Code 的 CLI 需要--no-sandbox参数才能启动否则报Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno Operation not permitted。这是 WSL2 内核限制必须在 spawn 参数中显式添加spawn(claudePath, [--no-sandbox, --input, tempFile], { ... });3.3 OpenClaw 层不是 YAML 配置而是工作流的“电路板”OpenClaw 的 YAML 文件不是配置而是 Paperclip 的“电路图”。一个典型的paperclip-workflow.yaml长这样version: 1.0 workflow: name: react-code-analyzer description: Analyze React component and suggest improvements nodes: - id: parse-input type: shell command: cat {{ input.file }} | head -n 20 output: {{ stdout }} - id: claude-analyze type: http url: http://localhost:3000/api/claude method: POST body: | { code: {{ parse-input.stdout }}, prompt: Analyze this React component for best practices } headers: Content-Type: application/json output: {{ response.body.suggestion }} - id: generate-test type: http url: http://localhost:3000/api/jest-generator method: POST body: | { component: {{ parse-input.stdout }}, suggestion: {{ claude-analyze.output }} } output: {{ response.body.test_code }} outputs: - name: final-report value: {{ generate-test.output }}关键细节变量注入语法{{ }}是 OpenClaw 的核心它不是模板引擎而是工作流执行时的实时求值。{{ input.file }}表示上一个节点传入的文件路径{{ parse-input.stdout }}表示parse-input节点的标准输出。错误写法是{{ input }}会报错必须精确到字段。http类型节点必须指定url和methodOpenClaw 不会自动识别localhost:3000是 Node.js 服务必须写全http://localhost:3000/api/claude。我曾漏写http://导致 OpenClaw 报错Invalid URL: localhost:3000/api/claude调试了 2 小时才发现是协议缺失。shell节点的command必须是单行不能换行不能用连接多命令OpenClaw 会将其视为一个字符串传给sh -c。正确写法是command: cat {{ input.file }} | head -n 20错误写法是command: |\n cat {{ input.file }}\n head -n 20。output字段决定数据流向{{ response.body.suggestion }}表示从 HTTP 响应体中提取suggestion字段。如果响应是{error: xxx}而你写了{{ response.body.suggestion }}OpenClaw 会返回undefined后续节点崩溃。必须在 Node.js 层保证响应体结构稳定。实操心得OpenClaw 的openclaw serve命令默认监听0.0.0.0:3001但在 WSL2 中Windows 主机无法直接访问localhost:3001。必须在 WSL2 的/etc/wsl.conf中添加[interop] enabledtrue appendWindowsPathtrue [network] generateHoststrue generateResolvConftrue然后重启 WSL2wsl --shutdown否则 React 页面里的fetch(http://localhost:3001/v1/run)会超时。3.4 Claude Code 层不是安装完就完事而是本地模型的“精准喂养”Claude Code Desktop 的安装只是开始真正的难点在于让它稳定输出符合 Paperclip 协议的 JSON。默认情况下Claude Code 的 CLI 输出是 Markdown 格式带 ts 代码块而 Paperclip 的 Node.js 层需要纯 JSON。解决方案是使用--format json参数claude-code-cli --input /tmp/input.ts --format json --prompt Generate TypeScript interface但--format json有三个隐藏陷阱JSON 输出包含非标准字段Claude Code 的 JSON 响应是{text: interface User {...}, usage: {input_tokens: 123, output_tokens: 45}}而 Paperclip 的 Node.js 层期望{suggestion: interface User {...}}。必须在 Node.js 的child.on(close)回调里做字段映射const result JSON.parse(stdout); res.json({ suggestion: result.text });--prompt参数长度限制Claude Code 的 CLI 对 prompt 长度有限制实测约 4096 字符。如果用户输入的代码 提示词超长会静默截断。我的方案是在 Node.js 层用string.substring(0, 3500)截断 prompt并在响应体中添加truncated: true字段提醒前端“内容已被截断”。模型切换需重启进程Claude Code CLI 不支持运行时切换模型如从claude-3-haiku切到claude-3-sonnet。每次切换必须 kill 进程并重启。Paperclip 的最佳实践是在 OpenClaw 的 YAML 中为每个模型定义独立节点用--model claude-3-haiku参数硬编码避免动态切换。注意Claude Code 的--model参数值必须与 Anthropic 官方文档一致。常见错误是写claude-3-sonnet-20240229带日期实际应写claude-3-sonnet。写错会导致进程立即退出stderr 输出Unknown model: claude-3-sonnet-20240229。4. Paperclip 实操全流程从 WSL2 初始化到 React 页面可点击4.1 环境初始化WSL2 Ubuntu 22.04 的黄金配置Paperclip 的推荐运行环境是 WSL2 Ubuntu 22.04非 CentOS 7.9后者 glibc 版本太低Claude Code 无法启动。初始化步骤启用 WSL2 并安装 Ubuntu 22.04# 在 PowerShell管理员中执行 dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart wsl --install wsl --set-default-version 2 # 从 Microsoft Store 安装 Ubuntu 22.04配置 WSL2 内存与交换空间防止 Claude Code OOM 在 Windows 的%USERPROFILE%\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\wsl.conf中添加[wsl2] memory4GB swap2GB localhostForwardingtrueUbuntu 内安装必要依赖sudo apt update sudo apt upgrade -y sudo apt install -y build-essential curl git python3-pip libglib2.0-0 libsm6 libxext6 libxrender-dev libglib2.0-dev # 安装 Node.js 22.12Paperclip 要求 curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash - sudo apt-get install -y nodejs # 验证node -v 应输出 v22.12.0安装 OpenClawcurl -L https://github.com/openclaw/openclaw/releases/download/v0.12.0/openclaw-linux-amd64 -o openclaw chmod x openclaw sudo mv openclaw /usr/local/bin/ # 验证openclaw --version安装 Claude Code Desktop访问 https://claude.ai/download 下载.deb包在 Ubuntu 中执行sudo apt install ./claude-code-desktop_*.deb验证claude-code-cli --help应输出帮助信息提示不要用npm install -g claude-code-cli那是社区非官方包与 Paperclip 不兼容。必须用官方.deb安装的 CLI。4.2 四层代码编写从零创建 Paperclip 项目创建项目目录结构paperclip-project/ ├── client/ # React 前端 ├── server/ # Node.js 后端 ├── workflows/ # OpenClaw YAML └── scripts/ # 启动脚本client/ 的关键文件src/App.jsx主组件包含文件拖拽区和结果展示src/api.js封装fetch(/api/claude)调用package.json添加proxy: http://localhost:3000server/ 的关键文件index.jsExpress 服务处理/api/claude等路由claudeRunner.js封装 Claude Code 进程调用逻辑package.json依赖express,p-limit,tmpworkflows/paperclip-workflow.yaml如前文所示的 YAML 工作流scripts/start.sh一键启动四层#!/bin/bash # 启动 OpenClaw cd ../workflows openclaw serve --config paperclip-workflow.yaml --port 3001 # 启动 Node.js cd ../server npm start # 启动 React cd ../client npm start 4.3 启动与验证如何确认 Paperclip 已焊牢按顺序执行cd scripts chmod x start.sh ./start.sh验证步骤检查端口占用lsof -i :3000 # 应显示 node 进程React 代理 lsof -i :3001 # 应显示 openclaw 进程 lsof -i :5000 # 应显示 claude-code-cli 进程由 Node.js 启动手动触发 Claude Codecurl -X POST http://localhost:3000/api/claude \ -H Content-Type: application/json \ -d {code:const a 1;,prompt:Suggest improvement}应返回{suggestion:Use const instead of let}。调用 OpenClaw 工作流curl -X POST http://localhost:3001/v1/run \ -H Content-Type: application/json \ -d {workflow:react-code-analyzer,input:{file:/tmp/test.ts}}应返回工作流执行结果。打开 React 页面访问http://localhost:3000拖入一个.tsx文件点击“Analyze”观察 Network 面板中的/api/claude请求是否成功。常见失败信号React 页面报Network Error说明 Node.js 服务未启动报500 Internal Server Error说明 Claude Code 进程启动失败检查server日志报404 Not Found说明 OpenClaw 的/v1/run路径未被代理检查package.json的 proxy 设置。4.4 生产部署Paperclip 如何在阿里云 ECS 上稳定运行Paperclip 的生产部署不是 Docker Compose而是PM2 进程守护 Nginx 反向代理。步骤在阿里云 ECSUbuntu 22.04上安装 PM2npm install -g pm2 pm2 startup # 生成开机启动脚本创建ecosystem.config.jsmodule.exports { apps: [{ name: openclaw, script: openclaw, args: serve --config /home/ubuntu/paperclip-project/workflows/paperclip-workflow.yaml --port 3001, autorestart: true, watch: false, }, { name: node-server, script: ./server/index.js, autorestart: true, watch: false, env: { NODE_ENV: production, CLAUDE_PATH: /opt/Claude Code/resources/app/bin/claude-code-cli } }, { name: react-client, script: npx, args: serve -s build -p 3000, cwd: /home/ubuntu/paperclip-project/client, autorestart: true, watch: false, }] };构建 React 生产包cd client npm run build启动所有进程pm2 start ecosystem.config.js pm2 save配置 Nginx 反向代理/etc/nginx/sites-available/paperclipserver { listen 80; server_name your-domain.com; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location /api/ { proxy_pass http://localhost:3000/api/; } location /openclaw/ { proxy_pass http://localhost:3001/; } }然后sudo nginx -t sudo systemctl reload nginx。实操心得阿里云 ECS 的安全组必须开放 80 端口且关闭iptablessudo ufw disable否则 Nginx 无法绑定端口。另外Claude Code 的--no-sandbox参数在 ECS 上仍需保留这是 Chromium 内核的通用限制。5. Paperclip 常见问题与排查技巧实录那些官方文档不会写的坑5.1 典型问题速查表问题现象根本原因解决方案验证命令Error: claude native binary not installedNode.js 层找不到claude-code-cli二进制在server/index.js中用which claude-code-cli动态探测路径失败时返回 503which claude-code-cliOpenClaw cannot connect to http://localhost:3000/api/claudeOpenClaw 运行在 WSL2localhost指向 WSL2 自身而非 Windows 主机在 OpenClaw YAML 中将 URL 改为http://host.docker.internal:3000/api/claudeWSL2 专用curl http://host.docker.internal:3000/api/claudeReact 页面白屏Console 报Failed to load resource: net::ERR_CONNECTION_REFUSEDpackage.json的proxy字段未生效或 React 开发服务器未启动删除node_modules和package-lock.json重新npm install确保npm start在client/目录下执行ps aux | grep react-scriptsClaude Code 启动后立即退出stderr 输出GLIBCXX_3.4.29 not foundUbuntu 22.04 的 libstdc 版本低于 Claude Code 要求手动升级sudo apt install -t impish libstdc6strings /usr/lib/x86_64-linux-gnu/libstdc.so.6 |