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

【问题标题】：Invalid CSRF Token in React but valid in PostmanReact 中的 CSRF 令牌无效，但在 Postman 中有效
【发布时间】：2021-12-07 08:51:52
【问题描述】：

我有一个 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 中获取令牌的方式

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 标志。我无法弄清楚我错过了什么。

【问题讨论】：

标签： node.js reactjs express csrf

【解决方案1】：

也许您应该将axios.defaults.headers.post["X-CSRF-Token"] = data.csrfToken 更改为axios.defaults.headers.common["X-CSRF-Token"] = data.csrfToken

【讨论】：

感谢您的建议。虽然没用。标头和 cookie 已发送（检查请求时我可以在网络选项卡中看到），但错误仍然存在。

【解决方案2】：

显然，问题在于您还需要将 withCredetials 标志传递给获取 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) {}
};

【讨论】：