uni-app 中图片验证码需后端生成并返回图片地址，前端用 <image> 组件加载（带随机参数防缓存），配合 captchaId 标识实现刷新、校验与防重放，各端需适配协议、域名及安全配置。
uni-app 里怎么生成图片验证码？
uni-app 本身不提供服务端能力，图片验证码必须由后端生成并返回图片地址（如 /api/captcha?r=123），前端只负责请求、展示、输入校验。常见错误是试图在 uni-app 客户端用 canvas 动态画验证码——这既不安全（字符可被 JS 提取），也不符合验证码本质（需服务端绑定 session 或 token）。
正确做法：后端提供两个接口：
• 获取验证码图片：GET /api/captcha，返回 image/png 响应（含 Set-Cookie 或响应头携带 x-captcha-key）；
• 校验输入：POST /api/login 或 POST /api/verify-captcha，携带用户输入 + 后端下发的标识（如 captchaId 或 token）。
- uni-app 中用
<image>组件加载验证码图片，src拼接时间戳防缓存：https://api.example.com/api/captcha?t=${Date.now()} - 每次点击「换一张」都要重新请求，并清空用户已输的
input值（避免旧值误提交） - 注意：H5 端可直接跨域请求（需后端配置 CORS）；App 和小程序端需配置
request合法域名，且小程序要求https+ 已备案
uni-app 怎么处理验证码刷新和防重复提交？
用户频繁点「换图」或快速提交，容易触发后端验证码失效或校验错乱。关键不是前端“控制点击频率”，而是让每次刷新都携带唯一上下文。
- 后端应在返回图片时，同时返回一个临时标识，比如
{ captchaId: "abc123", expires: 300 }，前端存入data或ref，提交时一并发送 - uni-app 中建议用
uni.showLoading+disabled控制按钮状态，但不要依赖它阻止重复请求——真正拦截靠后端幂等校验 - 图片 URL 加随机参数比加时间戳更可靠：
src=`/api/captcha?_t=${Math.random()}`，避免某些 CDN 缓存t=xxx相同值 - App 端若遇到图片不刷新，检查是否因
web-view缓存或uni.downloadFile缓存机制干扰，优先用<image src="...">直接渲染
小程序和 App 端验证码图片显示异常怎么办？
最常见现象：图片空白、显示成红叉、控制台报 net::ERR_CONNECTION_REFUSED 或 fail net::ERR_UNKNOWN_URL_SCHEME。根本原因通常是环境适配没做全。
- 小程序：必须使用
https协议，且域名已在后台配置为「request 合法域名」；图片域名还需额外加入「downloadFile 合法域名」（即使你没调uni.downloadFile，<image>内部会走该通道） - App（vue2/vite）：Android 可能因 targetSdkVersion 升级默认禁用 http，强制用 https；iOS 需在
info.plist加NSAppTransportSecurity白名单（仅调试期，上线必须 https） - H5 端若出现跨域，后端需返回
Access-Control-Allow-Origin: *（或指定域名）+Access-Control-Allow-Credentials: true（如果带 cookie） - 调试技巧：把图片 URL 复制到浏览器打开，看能否正常显示；不行就说明后端没配好或路径错了
验证码输入框怎么和图片联动校验？
不能只靠前端正则判断长度，必须和服务端返回的标识绑定。否则用户复制粘贴旧验证码也能过（因为没关联本次图片）。
- 定义响应式字段：
captchaCode: ''和captchaId: ''（从上一次获取接口响应中提取） - 提交时，
data至少包含：{ captchaCode: this.captchaCode, captchaId: this.captchaId } - 后端校验逻辑必须：查该
captchaId是否存在、未过期、未被使用过，且明文匹配（注意大小写！多数验证码后端默认忽略大小写，但有的严格区分） - uni-app 输入框建议加
confirm-type="send"，软键盘「发送」键触发校验，提升体验 - 校验失败后，清空
captchaCode并自动刷新图片（调用换图方法），别让用户手动点
真正的难点不在 uni-app 写几行代码，而在于前后端对「验证码生命周期」的理解是否一致：谁生成、谁销毁、何时失效、如何防重放。很多问题其实出在后端没返回 captchaId 或前端没传，而不是 uni-app 本身限制。
