nodejs 为前端传递验证码图片时出问题

Question

前端的代码： $('#capShow')获取验证码容器

$(document).ready(function() {
  // try to get captcha
    var getCcap = function() {
    $.ajax({
        type: "GET",
        url: "https://www.wenjiangs.com/wp-content/uploads/stackoverflow/202207/getCaptcha",
        cache: false,
        headers: {
            Accept: "image/jpeg",
            "Content-Type": "image/jpeg"
        },
    }).done(function(data) {
        console.log(data);
        $('#capShow').html(data);
    }).fail(function() {
        console.error('Fail to get captcha from server!')
    });
  };

  getCcap();
  $('#capShow').on('click', function() {
      getCcap();
  });
})

---

后端的代码：引用了ccap这个生成验证码的模块

var ccap = require("ccap")
exports.captcha = function(req, res) {
    var arr = ccap.get();
    var text = arr[0];
    var buf = arr[1];
  // fs.writeFile("cap.jpeg", buf, function(err) {
  //   if (err) {
  //     console.log("errro！");
  //   } else {
  //     console.log("保存成功！");
  //   }
  // });
  res.set('Content-Type', 'image/jpeg');
  res.send(buf);
};

app.get('/getCaptcha', login.captcha);

以上是代码，上下文还是比较明确的，前端收到的data还是一大串buffer，设置了请求头。不知是什么问题，小弟刚开始写后端

Answer 1

后端有没有问题我不清楚，你可以把图片输出到页面试试。

不过前端部分就有问题，直接用AJAX得到的图片只能是数据，因为它并没有用Image对象来包装。

其实图片不必用AJAX来获取，你可以把验证码当作一般的图片URL，直接用image包装或者使用直接把它输出就可以。

objImage = new Image();
objImage.src='/getCaptcha'; 

OR

<img src="https://www.wenjiangs.com/wp-content/uploads/stackoverflow/202207/getCaptcha"/>

Answer 2

这个没错，是一个图片。你ajax收到的一大串buf也是对的它就是图片。唯一遗憾的是你没有办法显示出来。所以正确的办法是
显示验证码
刷新按钮这样写：
var img_tag = $("#xxx);//找到img标签
img_tag.attr("src", "https://www.wenjiangs.com/wp-content/uploads/stackoverflow/202207/getCaptcha");

另外url中最好不要有大小写混合，这涉及到不同的web server和app server甚至操作系统的大小写敏感问题。（今天这段话我重复了两遍）

Answer 3

前后端分离开发模式（非MVC），ajax获取到图片验证码之后，用户数据填好ajax提交后台，后端如何判断前端提交的验证码就是后端生成的验证码？ccap生成验证码之后保存数据库？