无法弄清楚为什么我的 Rails 控制器上出现随机“无法验证 CSRF 令牌真实性”错误

Question

问题

我有一个多页反应应用程序和 rails 后端，我将其用作 API。

用户退出应用程序后，rails 将在接收任何后续 POST 或 DELETE 请求时抛出 CSRF 错误，直到我在浏览器中执行完整页面刷新。

例如注销后，登录表单POST请求会导致422错误，直到我刷新页面。 然后登录后，登录后POST / DELETE请求也会随机触发422错误，直到我刷新页面

Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms | Allocations: 775)

ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):
  
actionpack (6.0.3.4) lib/action_controller/metal/request_forgery_protection.rb:215:in `handle_unverified_request'
actionpack (6.0.3.4) lib/action_controller/metal/request_forgery_protection.rb:247:in `handle_unverified_request'

CSRF 令牌正在 application.html.erb 文件中设置

<%= csrf_meta_tags %>

我创建了一个 axios 组件来解析这个令牌

const token = document.querySelector('[name="csrf-token"]') || {content: 'no-csrf-token'}
const axiosPost = axios.create({
  headers: {
    common: {
      'X-CSRF-Token': token.content
    }
  }
})
export default axiosPost

我正在将它导入到其他各种组件中并使用它来发出请求，例如

import AuthContext from './AuthContext'

const Logout = () => {

  const {authState, setAuthState} = useContext(AuthContext)
  const handleLogout = () => {
    axiosPost.delete('/users/sign_out', {}, { withCredentials: true })
    .then((resp) => {
      setAuthState(false)
    })

当 setAuthState 值设置为 false 时，我的 App.js 组件将重新呈现页面并仅显示登录组件。

有趣的是，如果我将此注销 / state 驱动的重新渲染替换为

axiosPost.delete('/users/sign_out', {}, { withCredentials: true })
    .then((resp) => {
      setAuthState(false)
      window.location.href = '/login'
    })

它触发了页面刷新，并且我没有在后端收到 CSRF 错误（至少不那么频繁）。

我开始认为布局中的 CSRF 令牌需要在用户退出应用程序后重新加载/刷新，但这可能只是另一个红鲱鱼。

另一件事，我确实用

def destroy
  signed_out = (Devise.sign_out_all_scopes ? sign_out : sign_out(resource_name))
  if signed_out
    head :no_content
  end
end

我看不出这种方法会如何导致 CSRF 问题，但添加它以获得额外的上下文。

应用程序堆栈

• 后端的 Rails 6.0.3.4（全栈，不仅仅是 api）
• 启用 CSRF 保护
• Devise 用于用户身份验证和授权访问受保护的控制器
• 在前端做出反应。
• 我的反应应用程序通过 application.html.erb 初始化一次

任何帮助/指导表示赞赏