nodejs系列:78.原生node之图形验证码-下

158 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第24天,点击查看活动详情

系列介绍

该系列主要是介绍一些nodejs相关的基础知识,没有什么特别难的知识点,都是一些比较基础知识点。大家学习起来,也会比较容易理解和接收。

这些知识点,也是以前自己学习nodejs的时候,学习过的知识点。有些知识点,可能是由于学习的时间比较久了,也有可能是平时工作中用到的机会比较少,也差不多快把它们都忘记掉了。现在把它们都写下来,写成文章,一方面是记录下自己以前学习的nodejs知识点,一方面也是复习巩固自己以前学习的nodejs知识点。不要学着学着,就把以前的知识点都忘光了。

环境安装

实现之前,你首先需要安装nodejs环境。因为我们写的代码需要在node环境上运行,如果你没有,那么文件会运行不了。

以下是nodejs的安装地址,如果你没有安装的话,可以先把它安装上。安装了可以忽略这一步,跳到下面一步。

nodejs安装

前言

在上一篇文章里nodejs系列:77.原生node之图形验证码-中,主要是完成了服务器端的代码。

客户端页面和服务器端代码都完成了,接下来,我们将进行前后端联调,看下使用svg-captcha图形库的效果怎么样。

示例

在cmd里,用node运行index.js文件

0001.png

服务器启动了,在浏览器里,打开index.html页面

0002.png

浏览器页面是空白的,我们打开浏览器的控制台

0003.png

报错了,提示我们跨域了,这是因为我们的服务器端没有配置跨域。

在index.js文件里,配置跨域

res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "PUT,GET,POST,DELETE,OPTIONS");
res.setHeader("Content-type", "application/json");

在cmd里,用node重新运行index.js。到浏览器里,刷新一下浏览器

0002.png

还是空白,控制台也没有报跨域错误。我们到cmd里,看下有没有什么报错。

0004.png

有报错,报错信息提示我们node的响应内容格式只能是stringBuffer或者Unit8Array格式。而我们现在,设置的响应内容为一个对象,这是不允许的。

在index.js里,我们打印一下svg-captcha创建的图形

console.log(verification)

0005.jpg

我们可以看到,svg-captcha的create方法,返回的是一个对象,图形存在data属性里,是svg格式的图片。

我们从verification里取出data,返回给客户端即可。

res.end(verification.data);

在cmd里,用node重新运行index.js。到浏览器里,刷新一下浏览器

0006.png

现在,我们可以在浏览器里查看图形验证码了。

小结

本小节,主要是进行前后端联调。在联调的时候,也是发现了一些问题,比如跨域问题,返回数据的格式等。

把这些问题都解决了,就可以成功地在浏览器里查看图形验证码了。

如果有想要在node里做图形验证码的功能的朋友,也可以尝试一下使用svg-captcha图形库来实现一下。

最后,放上自己比较喜欢的一句诗句:

千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》