React/Rails应用如何获取CSRF Token解决InvalidAuthenticityToken报错

核心错误原因 #

你当前的CSRF Token获取逻辑存在问题：document.head.querySelector("[name='csrf-token']")返回的是<meta>标签的DOM节点对象，而非节点中存储的Token值，导致请求头携带的是无效的对象而非正确的Token字符串，所以校验失败。

原生JavaScript获取CSRF Token的最优方案 #

方案1：从HTML meta标签获取（推荐，适用于Rails渲染前端入口的场景） #

Rails默认会在应用入口HTML的head标签中插入<meta name="csrf-token" content="实际Token值">，直接读取该标签的content属性即可：

const getCsrfToken = () => {
  const csrfMeta = document.querySelector('meta[name="csrf-token"]')
  return csrfMeta ? csrfMeta.content : ''
}

方案2：从Cookie获取（适用于React为独立SPA、入口不由Rails渲染的场景） #

如果前端入口是纯静态HTML没有插入meta标签，Rails会自动将CSRF Token存在名为_csrf_token的Cookie中，直接解析Cookie读取即可：

const getCsrfToken = () => {
  const tokenMatch = document.cookie.match(/_csrf_token=([^;]+)/)
  return tokenMatch ? decodeURIComponent(tokenMatch[1]) : ''
}

修正后的请求头构造代码 #

const getHeaders = () => {
  const headers = new window.Headers({
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  })

  const csrfToken = getCsrfToken()
  if (csrfToken) {
    headers.append('X-CSRF-Token', csrfToken)
  }

  return headers
}

验证步骤 #

1. 打开浏览器开发者工具控制台，直接执行getCsrfToken()，确认返回的是字符串格式的Token，而非DOM对象或空值
2. 发送请求后在网络请求面板查看X-CSRF-Token请求头是否携带了正确的Token值
3. 确认校验通过后删除控制器中的skip_forgery_protection配置，避免遗留安全风险

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