昨晚有个哥们找我，急得跟热锅上的蚂蚁似的。他说自己折腾了半个月的个人博客，功能都跑通了，偏偏那个登录框里的图形验证码，死活加载不出来。

图片: https://example.com/captcha-error.jpg

ALT: 网站后台显示验证码图片加载失败的报错界面

他第一反应是找服务器商，问是不是带宽不够。我听完直接笑了。这哪是带宽的事儿啊，典型的“自己做的网站验证码出不来怎么”调试误区。

咱们干开发的都知道，验证码这东西，看着简单，里头全是坑。尤其是自己手写代码的时候，稍微一个路径不对，或者跨域没处理好，直接白屏。

先说个真事儿。上周帮一个做本地生活的小老板修BUG。他的网站也是验证码出不来。我一看后台日志，好家伙，全是404错误。

为啥？因为他在前端HTML里写死了图片路径，用的是相对路径。结果他为了SEO，把网站根目录改了，从 /www/ 改到了 /www/site/。这一改，前端请求的 /captcha.jpg 实际上是在 /www/captcha.jpg，服务器当然找不到。

这种低级错误，新手最容易犯。

所以，如果你也遇到自己做的网站验证码出不来怎么解决，第一步，别慌，按F12打开开发者工具。

看Network面板。找到那个请求验证码图片的接口。

如果状态码是404，那就是路径错了。检查你的图片URL是不是绝对路径，或者确保相对路径相对于当前页面是正确的。

如果是500错误，那后端代码大概率崩了。看看你的后端日志，是不是生成图片的时候报错了？比如字体文件找不到，或者GD库没开启。

图片: https://example.com/f12-network.jpg

ALT: 浏览器开发者工具Network面板显示验证码接口请求失败

还有一种情况，特别隐蔽。就是跨域问题。

有些同学喜欢把静态资源放在OSS或者CDN上。比如验证码图片存在阿里云OSS。前端请求的时候，如果没配置好CORS头，浏览器会直接拦截请求。

这时候你看着像是没加载出来，其实是浏览器出于安全考虑，把图片给挡了。

怎么验证？看Console控制台，有没有红色的报错，写着 Access-Control-Allow-Origin 之类的字样。

如果有，去你的OSS控制台，或者Nginx配置里，加上允许的域名。

这里有个血泪教训。别为了省那点钱，用那种免费的、不稳定的图床。我之前见过一个案例，用的免费图床，突然挂了，导致全站验证码失效，用户登录不了，投诉电话被打爆。

那时候再想补救，黄花菜都凉了。

所以，自己做的网站验证码出不来怎么排查？

1. 查路径：确保图片URL能直接在浏览器新标签页打开。

2. 查日志：后端生成图片的逻辑有没有报错。

3. 查跨域：静态资源托管在别处，记得配CORS。

4. 查缓存：有时候浏览器缓存了旧的错误页面，试试强制刷新，或者用无痕模式试试。

别一遇到问题就想着重装系统，或者怀疑人生。

技术这东西，就是由无数个Bug堆出来的。你解决的每一个Bug，都是你成长的养分。

我见过太多人，遇到验证码问题，第一反应是问别人，而不是自己看代码。这样永远学不会。

下次再遇到自己做的网站验证码出不来怎么办的情况，静下心来，一行一行看代码。

你会发现，真相往往就藏在那些不起眼的细节里。

比如，有时候仅仅是因为你的CSS样式里，给验证码图片加了 display: none，或者高度设成了0。

这种时候，你查半天后端，查半天网络，最后发现是CSS的问题，那感觉，既憋屈又爽。

所以，别怕出错。

出错，才是学习的开始。

希望这篇干货，能帮你省下几个熬夜的夜晚。

毕竟，头发掉一根，就少一根。

图片: https://example.com/debugging-success.jpg

ALT: 开发者成功修复验证码后露出的轻松表情

记住，代码是写给人看的，顺便给机器执行。

把逻辑理顺了，验证码自然就出来了。

加油，打工人。