浏览器自动化踩坑实录：csrf 校验、Vue 组件与代理变量

## 一、背景

最近用浏览器自动化跑华为云成长中心的任务。过程中遇到三个故障。每个故障都中断流程。报错信息都不指向根因。本文记录复现方法与修复路径。

## 二、故障一：csrf 双令牌校验

现象：直接调用任务列表接口。返回 no request_csrf found。

排查：页面请求头带 csrf 字段。Cookie 里有 csrf-eco。

尝试一：把 cookie 值填进 header。返回 CSRF unequal。

原因：服务端同时校验令牌值与时效。页面每次请求刷新令牌。

结论：不要复用抓包得到的 csrf。在页面上下文内发请求。让页面自己带令牌。

## 三、故障二：Vue 组件点击失效

现象：实验列表页的卡片点击后无跳转。

排查：卡片是 li.test-content-li-pc，带 data-v 属性。没有 href，没有 data-id。点击事件由 Vue 绑定。

尝试一：el.click()。无反应。

尝试二：dispatchEvent 派发 click 事件。无反应。

尝试三：CDP 真实鼠标事件。无反应。

原因：事件绑定在最内层元素。需要完整的 pointer 事件序列。

结论：对 Vue 或 React 组件，优先用真实鼠标事件。点击文本节点，不要点击容器。若仍失败，从网络请求里找路由参数。直接构造 URL。

## 四、故障三：代理变量拦截本地请求

现象：curl 访问 127.0.0.1 的本地接口。返回 upstream connect failed。但 netstat 显示端口在监听。

排查：环境变量 https_proxy 指向本地代理。curl 把本地请求也发给代理。

修复：加 --noproxy 参数。

结论：本地回环地址必须绕过代理。命令行参数优先于环境变量。

## 五、守护进程的生命周期

现象：命令行启动的守护进程随父会话结束被清理。

status 显示 stale PID file from a daemon that exited uncleanly。

原因：工具会话结束时杀掉整个进程树。

修复：在独立终端启动。或用系统服务托管。

## 六、小结

三个故障的共同点：错误信息不指向根因。

csrf 报 unequal，实际是令牌时效问题。

Vue 点击无报错，实际是事件绑定层级问题。

代理报 connect failed，实际是流量走错路径。

排查顺序建议：先看网络层。再看 DOM 层。最后看进程层。