Flask使用flask-jwt-extended时fetch发POST请求报Missing CSRF token问题

问题原因 #

flask-jwt-extended 开启Cookie存储JWT的模式时，默认启用了双提交Cookie的CSRF防护机制：对于GET以外的修改类请求（POST/PUT/DELETE等），仅Cookie中携带csrf_access_token是不够的，你需要主动将该令牌的值放到请求头中，扩展才会校验通过。你当前的fetch请求没有传递该请求头，所以触发了Missing CSRF token错误。

解决方案 #

步骤1：前端添加读取Cookie的工具方法 #

用来获取Cookie中存储的csrf_access_token值：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

步骤2：修改fetch请求，添加CSRF请求头 #

在fetch的headers配置中增加X-CSRF-TOKEN字段，值为读取到的CSRF令牌：

fetch(window.location.origin + "/sendmail", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-CSRF-TOKEN": getCookie('csrf_access_token')
    },
    credentials: "same-origin",
    body: JSON.stringify(mail),
})

补充说明 #

• 如果你修改过flask-jwt-extended的JWT_CSRF_HEADER_NAME配置项，需要将上方的请求头名替换为你自定义的名称，默认值为X-CSRF-TOKEN。
• 不要为了规避这个问题直接设置JWT_COOKIE_CSRF_PROTECT = False，会导致站点存在CSRF安全漏洞。

内容的提问来源于stack exchange，提问作者WiktorKS