Rails应用中React组件发起AJAX POST报invalid authenticity token错误

核心错误点 #

你当前代码的 $.ajax 配置中使用了错误的参数键：jQuery AJAX 传递请求体的配置项是 data，不是你写的 parameters，这导致你声明的 authenticity_token 根本没有被发送到后端，自然验证失败。

修正后的基础请求代码 #

$.ajax({
  type: 'POST',
  url: posturl,
  data: {
    authenticity_token: $('[name="csrf-token"]')[0].content,
    msg_time: msg_time,
    sender: sender,
    sender_name: sender_name,
    body: msgbody
  },
  success: function(res){
    console.log(res);
  },
  error: function(err) {
    console.log(err);
  }
});

其他可选优化/异常排查方案 #

• 更推荐把 CSRF Token 放到请求头传递，不需要和业务参数混在一起，Rails 会默认识别 X-CSRF-Token 请求头，写法如下：

  $.ajax({
    type: 'POST',
    url: posturl,
    headers: {
      'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    },
    data: {
      msg_time: msg_time,
      sender: sender,
      sender_name: sender_name,
      body: msgbody
    },
    success: function(res){
      console.log(res);
    },
    error: function(err) {
      console.log(err);
    }
  });
  

• 如果页面长时间停留未刷新，可能出现会话过期导致 CSRF Token 失效的情况，刷新页面即可恢复正常；也可以在每次发起请求前重新读取 meta 标签的 Token 值，不要提前缓存 Token 变量。
• 如果项目引入了 Rails UJS，可直接调用 Rails.csrfToken() 获取有效 Token，比手动读取 DOM 更可靠。
• 若该接口属于纯 API 服务场景，可将对应路由放到 API 命名空间下，控制器继承 ActionController::API，默认关闭 CSRF 验证即可（该方案存在安全风险，仅适合无Cookie会话的API场景使用）。

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