为什么当我通过请求向后端发送令牌时，CSRF令牌总是说CSRF无效？

Question

我导入了这两个包（csrf、cookieparser），并在appjs中使用了express-js，它只工作，而且我在postman中测试了它的工作情况，这里是我的代码express-js：

const csrf = require('csurf')
const cookieParser = require('cookie-parser')

const csrfProtection = csrf({
    cookie: {
        httpOnly: true,
        maxAge: 3600
    }
});

app.use(cookieParser())
app.use(csrfProtection);

app.get('/auth/csrf-token', (req, res) => {
    res.json({ csrfToken: req.csrfToken() });
});

还有我使用 react js 的前端，在 useEffect 中，我从后端获取 csrf，然后我保存在 axios 的标头中，但是当我向后端发送请求时，响应说无效的 csrf ：/

   useEffect(() => {
        const getCsrfToken = async () => {
            const { data } = await API.get('/auth/csrf-token');
            API.defaults.headers.post['X-CSRF-Token'] = data.csrfToken;
        };
        getCsrfToken();
    }, []);
    
      const handelLogin = (e) => {
        e.preventDefault();
        API.post('/auth/login', {
            headers: {
                'Content-Type': 'application/json'
            },
            data: { email, password },
        }).then(({ data }) => {

            if (data.token) {
                localStorage.setItem('token', data.token);
                window.location.href = '/admin'
            }

        }).catch((e) => {
            console.log(e)
        })
    }

来自服务器的响应：ForbiddenError:无效的csrf令牌；

Answer 1

我通过在更改后将凭据添加到axios所有代码来解决问题

 AXIOS.get('get/csrf-token', {
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
            },
            withCredentials: true
        }).then(({ data }) => {
            AXIOS.defaults.headers.common['x-csrf-token'] = data.csrfToken
            AXIOS.defaults.withCredentials = true
        })

Answer 2

正如https://expressjs.com/en/resources/middleware/csurf.html#using-ajax中提到的

尝试将标头属性更改为此，

API.defaults.headers.post['CSRF-Token'] = data.csrfToken;