首页 web前端 Flex布局 Grid布局 工具 在线编辑器 关于
2020-07-12 22:42 2023-12-04 14:03 标签:node,session
npm install --save svg-captcha
npm install --save cookie-parser
npm install --save express-session
创建验证码路由
app.use('/captcha', svgRouter);
创建captcha.js文件
const express = require('express');
const svgCaptcha = require('svg-captcha');
const router = express.Router();
router.get('/',(req, res)=>{
const cap = svgCaptcha.create({
// 翻转颜色
inverse: false,
// 字体大小
fontSize: 36,
// 噪声线条数
noise: 3,
// 宽度
width: 100,
// 高度
height: 35,
});
req.session.captcha = cap.text; // session 存储验证码数值
console.log(req.session)
res.type('svg'); // 响应的类型
res.send(cap.data)
})
module.exports = router;
app.js中这样放,要放在路由之前
//cookie 及 session
var cookieParser = require('cookie-parser');
var session = require('express-session');
app.use(cookieParser());
app.use(session({
secret: '#*%&DSH222441', //加密字符串
name: 'captcha', //表示cookie的name,默认cookie的name是:connect.sid。
cookie: {maxAge: 180000,secure: false}, //cookie过期时间,毫秒。
resave: false, //是指每次请求都重新设置session cookie,假设你的cookie是6000毫秒过期,每次请求都会再设置6000毫秒。
saveUninitialized: true, //是指无论有没有session cookie,每次请求都设置个session cookie ,默认给个标示为 connect.sid。
}));
//创建svg路由
var svgRouter = require('./captcha');
app.use('/captcha', svgRouter);
页面验证码图片 这样写,this.global.nodeurl为nodejs服务器地址的全局变量,你直接写http://localhost:8080/captcha这样写也行,我是为了发布方便引入全局变量
img :src="this.global.nodeurl+'captcha'" title="点击刷新" @click="getCaptcha" ref="captcha">
后端那这样写,captcha为axios传过的验证码,req.session.captcha为session
if(captcha!==req.session.captcha){
isSuccess = {success:false,flag:2,msg:'验证码错误!'};
}
但是这样并不行,得不到cookie,必须要设置axios能够传cookie过来
Axios.defaults.withCredentials=true;
但是设置这个之后axios访问nodejs又提示:
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "");
res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,token");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
next();
});
之后查找无数资料,需要指定同域名,而且要设置Access-Control-Allow-Credentials参数为true,如下
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:8081");
res.header('Access-Control-Allow-Credentials', 'true');
res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,token");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
next();
});