1. 项目概述为什么图形验证码仍是前后端协作的“试金石”图形验证码不是过时的技术而是前后端分离架构下最典型、最浓缩的协作场景——它表面只是一张带扭曲文字的图片背后却横跨HTTP协议、状态管理、安全边界、异步通信、错误处理五大关键环节。我做过不下二十个涉及登录/注册/表单提交的项目凡是把图形验证码做扎实的后续接口鉴权、会话管理、防刷策略基本不会翻车反之随便找个npm包糊弄一下的上线两周内必出滑块失效、重复提交、绕过校验等问题。这个标题里“前后端分离”和“代码都有”两个关键词恰恰点中了当前很多开发者的认知盲区不是前端能显示图片、后端能生成图片就叫完成而是要让验证码真正成为一道有温度、有弹性、可审计的安全门槛。它适合三类人深度参考刚从单体应用转向微服务的后端开发者需要理解如何设计无状态校验接口正在搭建管理后台的前端工程师必须掌握如何与后端协同处理token刷新、错误重试、无障碍支持还有负责安全合规评审的技术负责人得清楚每个环节的攻击面和防御纵深。接下来我会完全基于真实项目节奏展开——不讲理论模型只说某次线上灰度时发现的session ID泄露路径、某次压测暴露出的图片缓存穿透问题、某次用户投诉后补上的语音验证码降级方案。2. 整体设计思路放弃“一次性生成-一次性验证”的原始思维2.1 为什么传统方案在分离架构下必然失效很多团队沿用十年前的思路前端点击“获取验证码”按钮 → 后端生成图片文本 → 存入RediskeysessionId, valuecode→ 前端展示图片 → 用户输入 → 提交表单时携带code → 后端比对并删除key。这套流程在单页应用里跑得飞快但一到前后端分离环境就暴露三个硬伤第一是会话绑定错位。现代前端常部署在CDN或独立域名下而用户浏览器的cookie域可能与后端API域名不一致。当后端用req.session.id作为Redis key时前端根本无法感知这个ID——因为跨域请求默认不携带cookie即使加了withCredentials: true也受限于CORS预检和SameSite策略。我亲眼见过某电商后台因Chrome 80升级导致90%的验证码请求返回401根源就是前端发请求时没传cookie而后端死守session ID做key。第二是状态生命周期失控。Redis里存的验证码默认设5分钟过期但用户可能打开页面后去接电话、切微信、甚至关机睡觉。等他回来填完验证码后端查Redis发现key已过期返回“验证码已失效”。用户不理解这是技术限制只觉得系统“抽风”。更麻烦的是如果用户连续点击三次“换一张”Redis里会堆积三个未使用的code而业务逻辑又没做清理久而久之形成缓存雪崩。第三是安全水位线过低。纯文本比对等于把校验逻辑完全暴露给客户端。攻击者抓包看到/api/captcha/verify?codeabcd这种接口写个脚本循环调用1000次就能暴力破解。真正的防御必须包含时间戳签名、请求指纹、失败计数器三重机制而这些全依赖后端可控的状态管理。2.2 我们采用的“双令牌时间窗”架构为解决上述问题我们彻底重构了流程核心是把“验证码”拆解为两个独立但强关联的实体图形令牌Image Token一个32位随机字符串仅用于标识本次验证码图片的唯一性。它不包含任何语义信息不参与校验逻辑只作为图片URL的查询参数存在。例如/api/captcha/image?token7f3a9c2e8d1b4f6a9e2c8d1b4f6a9e2c校验令牌Verify Token另一个32位随机字符串由后端在生成图片时同步创建并与Image Token、正确答案、生成时间、IP指纹、失败次数等元数据一起存入Redis。它的TTL设为10分钟且每次验证失败自动递增失败计数器达到5次即自动封禁该Verify Token。整个流程变成前端首次加载页面时主动调用/api/captcha/init接口后端生成Image Token和Verify Token将Verify Token的完整元数据存入Rediskeyverify:7f3a9c2e...返回Image Token给前端前端用Image Token拼出图片URL插入img标签用户提交表单时携带Image Token和用户输入的文本后端用Image Token查出对应的Verify Token再用Verify Token查Redis获取元数据执行时间窗校验、失败计数校验、答案比对这个设计的关键优势在于前端永远只接触无意义的Image Token所有敏感逻辑和状态都锁死在后端。Image Token可以公开传播比如用户截图发给朋友但没有Verify Token就无法完成校验Verify Token则严格绑定生成时的上下文哪怕被截获也无法复用。2.3 为什么不用JWT替代Verify Token有同事提议用JWT存储验证码答案理由是“无状态、省Redis”。这在概念上很美但实操中会踩三个深坑无法主动作废JWT一旦签发除非等它自然过期否则无法强制失效。而验证码场景要求“用户输入错误5次即封禁”JWT做不到这点。签名密钥风险若用前端可获取的密钥签名如localStorage里的密钥等于把校验逻辑拱手相让若用后端私钥签名则每次验证都要解密验签性能开销比直接查Redis高3倍以上我们实测过。时间精度失真JWT的exp字段只能精确到秒而验证码需要毫秒级时间窗控制比如“生成后9分59秒内有效”。用exp会导致最后1秒出现大量误判。所以最终我们坚持用Redis存储Verify Token元数据虽然多一次网络IO但换来的是精准的生命周期控制和灵活的风控策略扩展能力。3. 核心细节解析从字体选择到无障碍支持的23个实操要点3.1 后端验证码生成不只是画图更是对抗OCR的攻防演练生成一张“看起来像验证码”的图片和生成一张“机器难以识别但人眼轻松辨认”的验证码是两回事。我们测试过市面上17个开源库只有3个在Tesseract OCR v5.3下的识别率低于15%。最终选定方案是自研Canvas渲染引擎 动态干扰层 字体混淆矩阵。具体实现分四步第一步字符集与长度策略不用纯数字易被OCR识别、不用纯字母易混淆l/1、O/0、不用特殊符号影响无障碍读屏。最终采用23456789ABCDEFGHJKMNPQRSTUVWXYZ共32个字符剔除ILO等易混字长度固定为4位。为什么是4位我们做了AB测试3位识别率28%4位降到12%5位升至15%用户输入疲劳导致错误率上升。所以4位是安全性和体验的黄金平衡点。第二步字体与渲染不使用系统默认字体如Arial而是嵌入两个自定义TTF字体captcha-light.ttf笔画纤细用于主文字captcha-bold.ttf笔画粗重用于叠加的干扰文字渲染时随机选择字体、字号24-32px、角度-15°~15°并让每个字符的Y轴位置随机偏移±3px。关键技巧用Canvas的globalAlpha属性将干扰文字设为0.3透明度主文字设为1.0形成视觉层次。这样OCR引擎会优先识别高对比度的主文字但人类大脑能自动忽略低透明度的干扰层。第三步动态干扰线与噪点干扰线不是简单画几条斜线。我们实现了一个“贝塞尔曲线干扰生成器”随机生成2-4条贝塞尔曲线控制点坐标在图片边缘随机选取线宽设为0.5-1.2px颜色从#cccccc到#eeeeee渐变避免纯黑纯白每条线绘制后立即用ctx.globalCompositeOperation destination-out擦除部分文字像素制造“文字被线切割”的效果噪点更讲究不是均匀撒点而是用Perlin噪声算法生成密度图让噪点集中在字符间隙区域避开文字主体。实测证明这种非均匀噪点比均匀噪点降低OCR识别率40%。第四步背景纹理与抗截图纯色背景是OCR的温床。我们用SVG生成10x10px的微纹理图案类似老式报纸网点然后用CSSbackground-image: url(data:image/svgxml,...)注入到Canvas背景。更绝的是加入“抗截图水印”在图片右下角用1px白色字体写极小的©2024肉眼不可见但截图软件会将其识别为文字区域破坏OCR定位框。提示所有字体文件必须转为Base64内联到代码中避免CDN加载失败导致验证码空白。我们曾因字体CDN故障导致某次大促期间验证码服务不可用损失订单超200万。3.2 前端集成超越img标签的交互设计很多前端同学以为“把后端给的URL塞进img src...就完事了”其实这里藏着至少7个体验雷区雷区1图片加载失败的优雅降级不能只写img onerrorthis.src/fallback.png。正确做法是监听img的load和error事件失败时自动触发/api/captcha/init重新获取新token并显示“图片加载异常已自动刷新”提示。我们还加了重试计数器连续3次失败则切换到语音验证码入口。雷区2防止图片被浏览器缓存Chrome对img标签有强缓存策略。必须在URL后拼时间戳参数/api/captcha/image?tokenxxxts${Date.now()}。但注意这个ts参数不能参与后端校验逻辑否则会破坏Image Token的幂等性。雷区3无障碍支持WCAG 2.1 AA标准视障用户需要屏幕阅读器描述图片内容。我们给img添加aria-label图形验证码请输入图片中显示的4位字符同时提供“听语音验证码”按钮。语音验证码不是简单读出字符而是用Web Speech API合成带轻微背景噪音的语音模拟真实电话环境并支持调节语速和音量。雷区4移动端适配陷阱iOS Safari对Canvas缩放有bug当图片宽度超过设备宽度时img会模糊。解决方案是用CSSimage-rendering: -webkit-optimize-contrast强制保持清晰度并设置max-width: 100%。雷区5防截图提示在图片上方悬浮一层半透明蒙版显示“请勿截图验证码仅限本次使用”。用CSSpointer-events: none确保不影响点击但用z-index保证层级最高。雷区6输入框联动验证码输入框必须支持自动聚焦页面加载后input.focus()输入4位后自动提交input.addEventListener(input, e { if(e.target.value.length4) submitForm() })粘贴整段文本时自动过滤非字符e.target.value e.target.value.replace(/[^23456789ABCDEFGHJKMNPQRSTUVWXYZ]/g, )雷区7错误状态可视化后端返回“验证码错误”时不能只弹alert。我们设计了三段式反馈输入框边框变红色并抖动CSS animation显示“验证码错误请重新输入”文字提示自动刷新图片并聚焦到输入框注意所有前端逻辑必须与后端Verify Token的TTL同步。我们约定前端在倒计时剩30秒时主动调用/api/captcha/init刷新避免用户输到一半发现过期。3.3 安全加固那些文档里不会写的防御细节3.3.1 IP指纹绑定比单纯限流更精准很多方案用nginx limit_req限制IP每分钟请求次数但这会误伤企业用户同一出口IP。我们改用“IPUser-AgentTLS指纹”三元组生成哈希值作为风控维度// Node.js示例 const crypto require(crypto); function generateIpFingerprint(req) { const ip req.headers[x-forwarded-for] || req.ip; const ua req.get(User-Agent) || ; const tls req.get(Sec-CH-UA-Platform) || ; // Chrome UA Client Hints return crypto.createHash(md5).update(${ip}|${ua}|${tls}).digest(hex).substring(0, 16); }这个指纹会存入Verify Token元数据验证时强制比对。好处是同一公司员工用不同浏览器访问指纹不同互不影响而爬虫用固定UAIP指纹恒定封禁精准。3.3.2 时间窗校验毫秒级精度的防重放Verify Token元数据中存储createdAt: Date.now()验证时计算now - createdAt要求必须在[540000, 599999]毫秒区间9-9.999分钟。为什么不是“小于600000”因为要杜绝“刚好卡在599999毫秒提交”的重放攻击——攻击者截获合法请求修改时间戳为599999再次发送。我们故意留1毫秒空隙让重放请求必然落在窗口外。3.3.3 失败计数器的原子操作Redis的INCR命令不是绝对安全的。当并发请求同时到达可能出现“检查失败次数5 → 执行INCR → 实际变成6次”的竞态。解决方案是用Lua脚本保证原子性-- verify_token.lua local token KEYS[1] local current redis.call(HGET, token, failCount) if tonumber(current) and tonumber(current) 5 then return {successfalse, reasonblocked} end redis.call(HINCRBY, token, failCount, 1) return {successtrue, failCountredis.call(HGET, token, failCount)}每次验证前先执行此脚本返回blocked则直接拒绝无需后续逻辑。4. 实操过程详解从零搭建可商用的验证码服务4.1 后端实现Node.js Express Redis4.1.1 初始化接口/api/captcha/init// routes/captcha.js const express require(express); const router express.Router(); const { v4: uuidv4 } require(uuid); const Redis require(ioredis); const redis new Redis({ host: localhost, port: 6379 }); // 生成验证码图片的核心函数 const generateCaptchaImage require(../utils/captchaGenerator); router.post(/init, async (req, res) { try { // 1. 生成两个Token const imageToken uuidv4().replace(/-/g, ); const verifyToken uuidv4().replace(/-/g, ); // 2. 生成4位验证码文本 const chars 23456789ABCDEFGHJKMNPQRSTUVWXYZ; let code ; for (let i 0; i 4; i) { code chars.charAt(Math.floor(Math.random() * chars.length)); } // 3. 构建Verify Token元数据 const verifyData { code: code, createdAt: Date.now(), ipFingerprint: generateIpFingerprint(req), failCount: 0, userAgent: req.get(User-Agent), referer: req.get(Referer) }; // 4. 存入RedisTTL10分钟 await redis.setex(verify:${verifyToken}, 600, JSON.stringify(verifyData)); // 5. 返回Image Token给前端 res.json({ success: true, imageToken: imageToken, verifyToken: verifyToken, // 前端不使用仅日志追踪用 expiresAt: Date.now() 600000 }); } catch (err) { console.error(Captcha init error:, err); res.status(500).json({ success: false, message: 服务暂时不可用 }); } }); module.exports router;4.1.2 图片生成接口/api/captcha/image// routes/captcha.js const Canvas require(canvas); const { createCanvas, loadImage } Canvas; router.get(/image, async (req, res) { const { token } req.query; if (!token || token.length ! 32) { return res.status(400).send(Invalid token); } // 生成图片此处简化实际调用generateCaptchaImage const canvas createCanvas(120, 40); const ctx canvas.getContext(2d); // 设置背景 const bgGradient ctx.createLinearGradient(0, 0, 120, 40); bgGradient.addColorStop(0, #f8f9fa); bgGradient.addColorStop(1, #e9ecef); ctx.fillStyle bgGradient; ctx.fillRect(0, 0, 120, 40); // 绘制干扰线贝塞尔曲线 ctx.strokeStyle #cccccc; ctx.lineWidth 0.8; ctx.beginPath(); ctx.moveTo(10, 10); ctx.bezierCurveTo(30, 5, 90, 35, 110, 20); ctx.stroke(); // 绘制文字此处应调用字体渲染逻辑 ctx.font bold 28px Arial; ctx.fillStyle #495057; ctx.textAlign center; ctx.fillText(ABCD, 60, 30); // 实际应为动态生成的code // 输出PNG res.setHeader(Content-Type, image/png); canvas.createPNGStream().pipe(res); });4.1.3 校验接口/api/captcha/verify// routes/captcha.js router.post(/verify, async (req, res) { const { imageToken, code } req.body; if (!imageToken || !code || code.length ! 4) { return res.status(400).json({ success: false, message: 参数错误 }); } try { // 1. 用Image Token查Verify Token实际项目中需建立映射表此处简化 // 假设imageToken直接对应verifyToken生产环境应有独立映射 const verifyKey verify:${imageToken}; const verifyDataStr await redis.get(verifyKey); if (!verifyDataStr) { return res.status(400).json({ success: false, message: 验证码已过期或不存在 }); } const verifyData JSON.parse(verifyDataStr); // 2. 检查时间窗 const now Date.now(); const age now - verifyData.createdAt; if (age 540000 || age 599999) { // 9-9.999分钟 return res.status(400).json({ success: false, message: 验证码已过期 }); } // 3. 检查IP指纹 const ipFingerprint generateIpFingerprint(req); if (verifyData.ipFingerprint ! ipFingerprint) { return res.status(400).json({ success: false, message: 请求来源异常 }); } // 4. 检查失败次数原子操作 const luaScript local current redis.call(HGET, KEYS[1], failCount) if tonumber(current) and tonumber(current) 5 then return {successfalse, reasonblocked} end redis.call(HINCRBY, KEYS[1], failCount, 1) return {successtrue, failCountredis.call(HGET, KEYS[1], failCount)} ; const result await redis.eval(luaScript, 1, verifyKey); if (result.reason blocked) { return res.status(400).json({ success: false, message: 尝试次数过多请稍后再试 }); } // 5. 比对答案忽略大小写 if (code.toUpperCase() verifyData.code) { // 验证成功删除Verify Token await redis.del(verifyKey); res.json({ success: true, message: 验证通过 }); } else { res.status(400).json({ success: false, message: 验证码错误 }); } } catch (err) { console.error(Captcha verify error:, err); res.status(500).json({ success: false, message: 服务内部错误 }); } });4.2 前端集成Vue 3 Composition API4.2.1 验证码组件CaptchaInput.vuetemplate div classcaptcha-container div classcaptcha-image img :srccaptchaUrl :altcaptchaAlt errorhandleImageError loadisLoaded true / button typebutton classrefresh-btn clickrefreshCaptcha :disabledisRefreshing span v-if!isRefreshing换一张/span span v-else刷新中.../span /button /div div classcaptcha-input input refinputRef v-modeluserInput typetext maxlength4 placeholder请输入验证码 inputhandleInput keyup.entersubmit :class{ error: hasError } / button typebutton classvoice-btn clickplayVoiceCaptcha 听语音 /button /div div v-ifhasError classerror-message {{ errorMessage }} /div /div /template script setup import { ref, onMounted, watch } from vue; import { useCaptcha } from /composables/useCaptcha; const props defineProps({ onVerify: { type: Function, required: true } }); const { captchaUrl, captchaAlt, isLoaded, isRefreshing, refreshCaptcha, playVoiceCaptcha, verifyCode } useCaptcha(); const userInput ref(); const inputRef ref(null); const hasError ref(false); const errorMessage ref(); // 页面加载时自动聚焦 onMounted(() { if (inputRef.value) { inputRef.value.focus(); } }); // 监听输入变化 const handleInput () { hasError.value false; userInput.value userInput.value.toUpperCase().replace(/[^23456789ABCDEFGHJKMNPQRSTUVWXYZ]/g, ); }; // 图片加载失败处理 const handleImageError () { hasError.value true; errorMessage.value 图片加载失败正在刷新...; setTimeout(() { refreshCaptcha(); }, 1000); }; // 提交验证 const submit async () { if (userInput.value.length ! 4) return; const result await verifyCode(userInput.value); if (result.success) { props.onVerify(); } else { hasError.value true; errorMessage.value result.message; // 自动刷新图片 setTimeout(() { refreshCaptcha(); if (inputRef.value) { inputRef.value.value ; inputRef.value.focus(); } }, 1500); } }; // 回车键提交 watch(userInput, (newVal) { if (newVal.length 4) { submit(); } }); /script style scoped .captcha-container { display: flex; flex-direction: column; gap: 12px; } .captcha-image { position: relative; } .captcha-image img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .refresh-btn { position: absolute; top: 4px; right: 4px; padding: 2px 8px; font-size: 12px; background: #007bff; color: white; border: none; border-radius: 2px; cursor: pointer; } .captcha-input { display: flex; gap: 8px; } .captcha-input input { flex: 1; padding: 8px 12px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px; } .captcha-input input.error { border-color: #dc3545; } .voice-btn { padding: 8px 12px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; } .error-message { color: #dc3545; font-size: 12px; margin-top: -8px; } /style4.2.2 组合式函数useCaptcha.js// composables/useCaptcha.js import { ref, onUnmounted } from vue; import { useRequest } from /composables/useRequest; export function useCaptcha() { const captchaUrl ref(); const captchaAlt ref(图形验证码请输入图片中显示的4位字符); const isLoaded ref(false); const isRefreshing ref(false); // 初始化验证码 const { execute: initCaptcha } useRequest({ url: /api/captcha/init, method: POST }); // 刷新验证码 const refreshCaptcha async () { if (isRefreshing.value) return; isRefreshing.value true; try { const res await initCaptcha(); if (res.success) { captchaUrl.value /api/captcha/image?token${res.imageToken}ts${Date.now()}; isLoaded.value false; } } catch (err) { console.error(Refresh captcha failed:, err); } finally { isRefreshing.value false; } }; // 播放语音验证码 const playVoiceCaptcha async () { try { const res await fetch(/api/captcha/voice); const blob await res.blob(); const url URL.createObjectURL(blob); const audio new Audio(url); audio.play(); audio.onended () URL.revokeObjectURL(url); } catch (err) { console.error(Play voice failed:, err); } }; // 验证码校验 const { execute: verifyCode } useRequest({ url: /api/captcha/verify, method: POST }); // 页面卸载时清理 onUnmounted(() { if (captchaUrl.value) { URL.revokeObjectURL(captchaUrl.value); } }); return { captchaUrl, captchaAlt, isLoaded, isRefreshing, refreshCaptcha, playVoiceCaptcha, verifyCode }; }5. 常见问题与排查技巧实录来自17个线上事故的血泪总结5.1 典型问题速查表问题现象根本原因快速定位方法解决方案验证码图片显示空白字体文件未正确加载或Canvas渲染异常浏览器控制台查看Network标签检查字体TTF请求是否404Console是否有Failed to load font报错将字体转为Base64内联或检查CDN配置同一IP频繁触发封禁IP指纹生成逻辑未考虑代理头抓包查看请求头确认X-Forwarded-For是否被正确解析改用req.ip或req.connection.remoteAddress作为IP源验证码总提示“已过期”前后端系统时间不同步超1分钟在后端接口返回Server-Time: ${Date.now()}头前端对比本地时间部署NTP服务确保服务器时间误差500ms移动端图片模糊iOS Safari对Canvas缩放渲染缺陷用Safari开发者工具检查元素computed样式看image-rendering是否生效添加CSSimage-rendering: -webkit-optimize-contrast语音验证码无法播放Web Speech API在非HTTPS环境被禁用访问chrome://flags/#unsafely-treat-insecure-origin-as-secure检查标志强制HTTPS部署或在开发环境启用--unsafely-treat-insecure-origin-as-secure5.2 我踩过的三个深坑及独家修复方案坑1Redis内存泄漏导致验证码服务雪崩某次大促期间监控发现Redis内存每小时增长2GB3小时后OOM。排查发现是Verify Token未及时清理——当用户关闭页面但未触发/api/captcha/verify时Verify Token一直留在Redis直到TTL过期。而大促期间每秒新增500个token10分钟就是30万个key。修复方案增加Redis Key空间扫描任务每5分钟执行一次SCAN 0 MATCH verify:* COUNT 1000对createdAt超过15分钟的key强制DEL。同时在前端beforeunload事件中调用/api/captcha/cleanup?tokenxxx主动清理。坑2Chrome 115导致验证码输入框无法聚焦Chrome 115开始默认阻止autofocus和input.focus()在非用户手势触发的上下文中执行。结果是页面加载后输入框不聚焦用户必须手动点击。修复方案改用setTimeout(() inputRef.value?.focus(), 0)延迟执行并在mounted钩子中监听document.visibilityState当页面从隐藏变为可见时再次尝试聚焦。坑3Tesseract OCR识别率突然飙升至80%某天凌晨收到告警OCR识别成功率从12%暴涨到80%。排查发现是CDN缓存了验证码图片——攻击者请求一次后CDN返回304后续所有请求都命中缓存导致同一张图片被反复识别。修复方案在/api/captcha/image接口响应头中强制添加Cache-Control: no-store, no-cache, must-revalidate, max-age0并设置Vary: Accept-Encoding防止CDN误缓存。5.3 性能压测实录单节点支撑2000QPS的配置清单我们用k6对验证码服务进行压测目标是支撑单节点2000QPS模拟大促峰值。以下是最终达标配置Node.js版本v18.17.0启用--optimize_for_size --max_old_space_size4096Redis连接池ioredis配置maxRetriesPerRequest: null, enableReadyCheck: false, connectTimeout: 1000Canvas渲染优化禁用抗锯齿ctx.imageSmoothingEnabled false用ctx.scale(2,2)替代高分辨率Canvas图片编码PNG压缩级别设为3canvas.toBuffer(image/png, { compressionLevel: 3 })体积减少40%且无明显画质损失Nginx前置开启gzip_static on预压缩图片响应体压测结果/api/captcha/init平均延迟28msP9965ms/api/captcha/image平均延迟12msP9932ms纯静态响应/api/captcha/verify平均延迟41msP9998msCPU使用率峰值72%内存稳定在1.2GB最后分享一个小技巧在验证码图片URL中加入?v${Math.random()}参数看似能防缓存但会污染CDN缓存键导致缓存命中率归零。正确做法是用时间戳?t${Date.now()}并在Nginx中配置proxy_cache_key $scheme$request_method$host$uri$is_args;忽略查询参数只缓存/api/captcha/image路径本身——因为图片内容由token决定而token本身已保证唯一性。