持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第24天,点击查看活动详情
系列介绍
该系列主要是介绍一些nodejs相关的基础知识,没有什么特别难的知识点,都是一些比较基础知识点。大家学习起来,也会比较容易理解和接收。
这些知识点,也是以前自己学习nodejs的时候,学习过的知识点。有些知识点,可能是由于学习的时间比较久了,也有可能是平时工作中用到的机会比较少,也差不多快把它们都忘记掉了。现在把它们都写下来,写成文章,一方面是记录下自己以前学习的nodejs知识点,一方面也是复习巩固自己以前学习的nodejs知识点。不要学着学着,就把以前的知识点都忘光了。
环境安装
实现之前,你首先需要安装nodejs环境。因为我们写的代码需要在node环境上运行,如果你没有,那么文件会运行不了。
以下是nodejs的安装地址,如果你没有安装的话,可以先把它安装上。安装了可以忽略这一步,跳到下面一步。
前言
在上一篇文章里nodejs系列:77.原生node之图形验证码-中,主要是完成了服务器端的代码。
客户端页面和服务器端代码都完成了,接下来,我们将进行前后端联调,看下使用svg-captcha图形库的效果怎么样。
示例
在cmd里,用node运行index.js文件
服务器启动了,在浏览器里,打开index.html页面
浏览器页面是空白的,我们打开浏览器的控制台
报错了,提示我们跨域了,这是因为我们的服务器端没有配置跨域。
在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。到浏览器里,刷新一下浏览器
还是空白,控制台也没有报跨域错误。我们到cmd里,看下有没有什么报错。
有报错,报错信息提示我们node的响应内容格式只能是string,Buffer或者Unit8Array格式。而我们现在,设置的响应内容为一个对象,这是不允许的。
在index.js里,我们打印一下svg-captcha创建的图形
console.log(verification)
我们可以看到,svg-captcha的create方法,返回的是一个对象,图形存在data属性里,是svg格式的图片。
我们从verification里取出data,返回给客户端即可。
res.end(verification.data);
在cmd里,用node重新运行index.js。到浏览器里,刷新一下浏览器
现在,我们可以在浏览器里查看图形验证码了。
小结
本小节,主要是进行前后端联调。在联调的时候,也是发现了一些问题,比如跨域问题,返回数据的格式等。
把这些问题都解决了,就可以成功地在浏览器里查看图形验证码了。
如果有想要在node里做图形验证码的功能的朋友,也可以尝试一下使用svg-captcha图形库来实现一下。
最后,放上自己比较喜欢的一句诗句:
千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》