在React中CSRF令牌无效，但在Postman中有效

Question

我有一个Express服务器，我正在其上生成一个csrf令牌。我的服务器看起来像这样

const csrfProtection = csrf({
cookie: {
httpOnly: true,
},
});
server.use(express.json());
server.use(express.urlencoded({ extended: true }));
server.use(
cors({
origin: "http://localhost:3000",
credentials: true,
})
);
server.use(cookieParser());
server.use(csrfProtection);
...
//Other routes

我像这样发送令牌

export const csrf = (req, res) => {
return res.send({ csrfToken: req.csrfToken() });
};

如果我从响应中取出它并将其添加到Postman中的X-CSRF-Token标头，那么我可以很好地访问所有路由。但在React中我总是得到invalid csrf token错误

这就是我在React

中获取token的方式

export const getCSRFToken = async () => {
try {
const { data } = await axios.get("/auth/csrf");
axios.defaults.headers.post["X-CSRF-Token"] = data.csrfToken;
} catch (error) {}
};

我在其他请求上使用withCredentials: true标志。我不知道我错过了什么。

Answer 1

显然，问题是您需要将withcredals标志传递给获取csrf令牌的请求。这就解决了问题。

export const getCSRFToken = async () => {
try {
const { data } = await axios.get("/auth/csrf", { withCredentials: true });
axios.defaults.headers.common["X-CSRF-Token"] = data.csrfToken;
} catch (error) {}
};

Answer 2

也许你应该把axios.defaults.headers.post["X-CSRF-Token"] = data.csrfToken改成axios.defaults.headers.common["X-CSRF-Token"] = data.csrfToken