验证码模块实现碰到的坑
在实现登录模块时,在验证码这里碰到一个坑就是:
问题:后台nodjs 生成一张svg的验证码图片并且返回到前端,并且把验证码放入到session中。
但是前台验证的时候验证码死活都不成功。
排查原因,百度后发现是因为浏览器请求后台nodejs 验证码接口时产生了跨域,而恰好前台是直接调用的验证码接口,没有经过代理路径去请求跨域接口,所以导致虽然验证码图片请求到并成功显示【img src 直接写 验证码接口路由!!!】,但是session的存储失败,
倒是输入的验证码和session中的undefined的captcha 比较,所以一直提示验证码失败。
解决方案:
定义验证码请求接口处理函数,请求经过 配置的路径去实现跨域。
proxyTable: { //web-cli 脚手架 创建的vue项目中的 config/index.js 中配置 '/api': { // 匹配所有以 '/api'开头的请求路径 target: 'http://localhost:4000', // 代理目标的基础路径 changeOrigin: true, // 支持跨域 pathRewrite: { // 重写路径: 去掉路径中开头的'/api' '^/api': '' } } }, //代理设置
import ajax from './ajax'//自定义异步请求函数 const BASE = '/api'//配置的代理路径 export const getCaptcha = () => ajax(`${BASE}/captcha`)
由于后台返回的是 svg编码资源,直接展示失败,于是还需要将svg代码转成图片资源,然后js赋值给 img标签的src属性!!
async changeCaptcha () { const cpa = await getCaptcha() //定义的异步请求验证码处理函数 var svg = new Blob([cpa], {type: "image/svg+xml;charset=utf-8"}); //将cpa===》这个svg编码 放到 Bolb中 使用 Blob 创建一个指向类型化数组的URL
var DOMURL = self.URL || self.webkitURL || self;
//ref=‘cha’放在一个img标签中 this.$refs.cha.src = DOMURL.createObjectURL(svg)// 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串 【MDN WEB docs 中的解释】
// 你可以像使用普通 URL 那样使用它,比如用在 img.src 上。
}