Express & Csurf rejects Vue (Axios) post request - express

Question

I am currently dealing with forms and decided to test sending an email onchange mid registration to the server and give responsive feedback to users.
On Vue component creation I get the csrf token and store it for future posts. I attach it to the headers as 'X-CSRF-Token'. I send the token and still receive the invalid CSRF token error. I have verified the data in headers and the csrf token is in-fact being sent but just being rejected or the header is missing something.
Screenshot of error and response
//App.js
var createError = require('http-errors');
var cors = require('cors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var csurf = require('csurf')
var Mongoose = require('mongoose')
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var productRouter = require('./routes/products')
var app = express();
// DB things
var db
dbConnect();
app.use(cors())
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser())
app.use(csurf({ cookie:true }))
app.use('/api/', indexRouter);
app.use('/api/users', usersRouter);
app.use('/api/products', productRouter)
//index routes
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.json({
message:'respond with a resource blank',
});
});
router.get('/getCSRF/', function(req, res, next) {
res.json({
csrf:req.csrfToken(),
});
});
module.exports = router;
Below is the route I try posting to
// Users Check Email Post Route
router.post('/checkEmail',function(req,res,next){
email = req.body.email
console.log(email)
User.findOne(function(err,user){
if (err) { return res.json({ err:err })}
else { return res.json({ user:true }) }
})
})
Here is the method used in Vue to post
checkEmail: function () {
var headers = {
'Accept': 'application/json',
'Access-Control-Allow-Origin': '*' ,
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type,
Accept',
'Content-Type':'application/x-www-form-urlencoded',
'X-CSRF-Token':this.$store.getters.getCSRF,
}
axios.post('http://localhost:8000/api/users/checkEmail', {
email: this.user.Email
},headers )
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error.response)
});
},
The issue is pretty common and I have gone through over 20 posts and tried their solutions but it did not help at all. I've tried using csurf independently on the same route(didn't work). I've tried all manner of headers. Your help will be greatly appreciated .
EDIT: Uploading to show proper headers pre-post. Pre-post logs of data

Answer 1

So I realized that csurf looks for two things . A cookie (this is not very apparent from the error but nevertheless) and the token to be sent via header . Axios by default apparently does not support cookies so I decided to move to a JWT header approach.

Answer 2

Your way of sending the token via router.get('/getCSRF/', ...) does not seem very secure to me, as any attacker could also easily get this token via this get request.
If you use app.use(csurf({ cookie:true })), then Express will validate every POST/PUT/DELETE request based on a cookie, but you need to set this cookie yourself.
(Csurf sets a cookie named _csrf but this is not the actual CSRF token)
I got it working this way:
Nodejs:
app.use(cookieParser());
app.use(
csrf({
// compare the XSRF-TOKEN cookie with the X-XSRF-TOKEN header on every post request
cookie: {
secure: true,
sameSite: 'strict',
},
})
);
app.use(function (req, res, next) {
// set the XSRF-TOKEN cookie so the client can send it back in the X-XSRF-TOKEN header
res.cookie('XSRF-TOKEN', req.csrfToken());
next();
});
I used Nuxt as my client. Nuxt.config.js:
modules: [
'#nuxtjs/axios',
],
axios: {
credentials: true, // this will take the XSRF-TOKEN from the cookie and set it in the X-XSRF-TOKEN header
baseURL: nuxtBaseUrl,
browserBaseURL: nuxtBrowserBaseUrl,
},
publicRuntimeConfig: {
axios: {
credentials: true, // this will take the XSRF-TOKEN from the cookie and set it in the X-XSRF-TOKEN header
baseURL: nuxtBaseUrl,
browserBaseURL: nuxtBrowserBaseUrl,
},
},
Alternative without nuxt:
const instance = axios.create({
baseURL: 'https://my-server/',
withCredentials: true, // this will take the XSRF-TOKEN from the cookie and set it in the X-XSRF-TOKEN header
});
instance.post('http://my-server/api/users/checkEmail', {
email: this.user.Email
}