nodejs 图形验证码 及 获取不到session的一系列问题

1
2
3
npm install --save svg-captcha
npm install --save cookie-parser
npm install --save express-session

创建验证码路由

1
app.use('/captcha', svgRouter);

创建captcha.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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中这样放，要放在路由之前

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//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这样写也行,我是为了发布方便引入全局变量

1
img :src="this.global.nodeurl+'captcha'" title="点击刷新" @click="getCaptcha" ref="captcha">

后端那这样写，captcha为axios传过的验证码，req.session.captcha为session

1
2
3
if(captcha!==req.session.captcha){
    isSuccess = {success:false,flag:2,msg:'验证码错误！'};
}

但是这样并不行，得不到cookie，必须要设置axios能够传cookie过来

1
Axios.defaults.withCredentials=true;

但是设置这个之后axios访问nodejs又提示：

1
2
3
4
5
6
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，如下

1
2
3
4
5
6
7
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();
});