Próbuję zaimplementować tokeny CSRF po stronie clienta, po stronie servera już mam to zrobione.
Po stronie servera wygląda to tak:
server.js
import cookieParser from 'cookie-parser';
import csurf from 'csurf';
app.use(cookieParser());
const csrfProtection = csurf({ cookie: true });
app.use(csrfProtection);
app.use(function(req, res, next) {
res.cookie('XSRF-TOKEN', req.csrfToken());
res.locals._csrf = req.csrfToken();
next();
});
router:
app.post('/add', async (req, res) => {
const jobs = await new Job({
name: req.body.name,
company: req.body.company,
}).save();
return res.json({ jobs, csrfToken: req.csrfToken() });
});
komponent którym próbuję wysłać dane do serwera:
import React from 'react';
import axios from 'axios';
import { useForm } from 'react-hook-form';
export default function Test() {
const { register, handleSubmit } = useForm();
const getSearch = async data => {
try {
const response = await axios.post('http://localhost:4000/add', {
name: data.name,
company: data.company
});
console.log(response);
} catch (error) {
console.log(`err ${error}`);
}
};
return (
<form onSubmit={handleSubmit(getSearch)}>
<input ref={register} type="text" name="name"></input>
<input ref={register} type="text" name="company"></input>
<input type="submit" value="Wyślij"></input>
</form>
);
}
Za każdym razem gdy wysyłam dane zwraca:
ForbiddenError: invalid csrf token
W jaki sposób mogę przekazać ten token aby to działało prawidłowo?