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

2020-07-12 22:42 2023-12-04 14:03 标签:node,session

安装 svg-captcha、cookie-parser、express-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
Axios.defaults.withCredentials=true;

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

Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
这种错误,需要跨域,本来设置的跨域完全没有效果
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();
});



压缩解压