koa2使用svg-captcha生成验证码接口（含前端vue项目中使用）

koa项目中

 安装插件svg-captcha

npm i --save svg-captcha

src\api\captcha.js

const svgCaptcha = require('svg-captcha');

function getCaptcha(ctx) {
    //  若创建算数式验证码，将create改为createMathExpr
    const newCaptcha = svgCaptcha.create({
        size: 4, //验证码长度
        fontSize: 45, //验证码字号
        noise: Math.floor(Math.random() * 5), //干扰线条数目_随机0-5条
        width: 120, //宽度
        height: 40, //高度
        color: true, //验证码字符是否有颜色，默认是没有，但是如果设置了背景颜色，那么默认就是有字符颜色
        background: '#ccc' //背景色
    })


    ctx.body = {
        data: newCaptcha.data,
    }
}

module.exports = {
    getCaptcha
}

src\routes\captchaRouter.js

const Router = require('koa-router')
const router = new Router()

const captchaAPI = require('../api/captcha')

router.get('/captcha', captchaAPI.getCaptcha)

module.exports = router

src\routes\routes.js 中添加captchaRouter

const combineRoutes = require('koa-combine-routers')
const userRouter = require('./userRouter')
const blogRouter = require('./blogRouter')
const captchaRouter = require('./captchaRouter')

module.exports = combineRoutes(userRouter, blogRouter, captchaRouter)

此时启动项目，通过访问 http://localhost:3000/captcha 便能得到验证码数据

Vue项目中

使用 v-html进行验证码图片的渲染

<div style="display: flex">
    <el-input v-model="formData.captcha" placeholder="请输入验证码"></el-input>
    <!--验证码-->
    <div @click="getCaptcha" v-html="captcha" style="margin-left: 6px">
    </div>
</div>

data中添加变量  captcha: '',

// 获取验证码
getCaptcha() {
    this.$http.get("/api/captcha")
        .then(res => {
            this.captcha = res.data.data;
        })
},

此时 vue.config.js 中的跨域配置为：

// 后端服务器地址
let url = 'http://localhost:3000/'

    devServer: {  // 开发环境跨域情况的代理配置
        proxy: {
            // 【必要】访问自己搭建的后端服务器
            '/api': {
                target: url,
                changOrigin: true,
                ws: true,
                secure: false,
                pathRewrite: {
                    '^/api': '/'
                }
            },