我在这里做错了吗 node+express + vue SPA getCSRFTOKEN()

Posted 2023-02-16

【中文标题】我在这里做错了吗 node+express + vue SPA getCSRFTOKEN()

【英文标题】：Am I doing anything wrong here node+express + vue SPA getCSRFTOKEN()

【发布时间】：2021-09-21 15:22:39

【问题描述】：

我的 index.js 服务器

// USE STRICT;
const express = require('express');
const app = express();
const session = require('express-session');
const http = require('http').Server(app);
const socket = require('socket.io');
const schedule = require('node-schedule');

const cors = require('cors');
const io = socket(http, 
    cors: 
        origin: 'http://localhost:8080',
        methods: ['GET', 'POST'],
        allowedHeaders: ['my-custom-header'],
        credentials: true
    
);

const port = 8080;

app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/uploads'));

const cookieParser = require('cookie-parser');
const csrf = require('csurf');
const mustacheExpress = require('mustache-express');
app.engine('html', mustacheExpress());
app.set('view engine', 'html');
app.set('views', __dirname + '/views');
const secret = 'somesecretkeyhere';
const passport = require('passport');
const helmet = require('helmet');
const  sendMail  = require('./controllers/sellerAdsController');
// Gives us access to variables set in the .env file via `process.env.VARIABLE_NAME` syntax
// require('dotenv').config();
// Must first load the models before passport
require('./models/user');
// Pass the global passport object into the configuration function
require('./config/passport')(passport);

// This will initialize the passport object on every request
app.use(passport.initialize());

// Allows our remote applications to make HTTP requests to Express application
app.use(cors());

app.use(helmet());

app.use(express.urlencoded( extended: false ));
// app.use(express.json()); //WARNING: Do not turn on. stops formidable for api calls

app.use(cookieParser(secret));
app.use(session(
    secret: secret,
    resave: false,
    saveUninitialized: true,
    cookie: 
        httpOnly: true,
        secure: true
    
));
app.use(csrf());
// Stop page caching
app.use(function (req, res, next) 
    res.set('Cache-Control', 'no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0');
    next();
);

// Imports all of the routes from ./routes/index.js
app.use(require('./routes/api/v1'));



// Socket Operations
// io.on('connection', io => 
//  let sessionId = io.id;

//  io.on('clientHandshake', (data) => 
//      console.log(data);

//      io.emit('serverHandshake',  sessionId: sessionId );
//  );
// );
// io.use((socket, next) => 
//  const username = socket.handshake.auth.username;
//  if (!username) 
//      return next(new Error('invalid username'));
//  
//  console.log(username);
//  socket.username = username;
//  next();
// );

io.on('connection', (socket) => 
    console.log('???? New socket connected! >>', socket.id);
    // notify existing users
    socket.broadcast.emit('user connected', 
        userID: socket.id,
        username: socket.username,
    );

    socket.on('private message', ( content, to ) => 
        socket.to(to).emit('private message', 
            content,
            from: socket.id,
        );
        console.log(content, to);
    );
);


// EROOR HANDLING ROUTES MUST BE BENEATH ALL APP.USE AND ROUTES
// Check if request is from web or app (HTML/JSON)
// Handle 404
app.use(function (req, res) 
    res.status(404);
    res.render('404.html',  title: '404: File Not Found' );
);

// Handle 500
app.use(function (error, req, res) 
    return res.send(error);
    // res.status(500);
    // res.render('500.html',  title: '500: Internal Server Error', error: error );
);

// SCHEDULED JOBS
const now = new Date();
let date = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 0, 0);
schedule.scheduleJob(date, sendMail);

http.listen(port, () => 
    console.log(`listening on *:$port`);
);

这就是我从 VUE 获得的方式

window.axios.get('/databank/getCSRF').then((response) => 
    
    
    window.axios.defaults.headers.common['XSRF-TOKEN'] = response.data;
, (err) => 
    console.log(err)
)

这是我的登录请求标头 XSRF-TOKEN from my login request header sent by axios

所以我已经像这样设置了我的服务器和我的 vue SPA，但是 getCSRF() 似乎正在收到请求，但我无法向服务器发出 POST 请求会引发错误

ForbiddenError: 无效的 csrf 令牌 在csrf

【参考方案1】：

可能是因为您写了XSRF-TOKEN 而不是CSRF-Token，正如它在Express Documentation 中所建议的那样。