如何在Rails中为navigator.sendBeacon请求处理CSRF验证令牌？

下面是完整的实现方案，核心是在页面卸载时机读取本地存储的统计数据，通过自定义函数处理Rails要求的CSRF验证，再用navigator.sendBeacon异步发送到后端接口：

// 监听页面卸载事件，触发数据上报
$(window).on('unload', function() {
  db.flipCounter.get(gon.slug, function(obj) {
    // 构造上报的核心数据
    var payload = {
      slug: gon.slug,
      localFlipCount: obj.fc,
      time: Date.now()
    };
    // 带上CSRF令牌后发送请求
    navigator.sendBeacon('/analytics', csrfProtect(payload));
  });
});

// 自定义CSRF处理函数：为请求添加验证令牌并转换为符合要求的格式
function csrfProtect(payload) {
  // 从页面meta标签中获取Rails生成的CSRF参数名和令牌值
  var param = $("meta[name=csrf-param]").attr("content");
  var token = $("meta[name=csrf-token]").attr("content");
  
  // 成功获取到参数和令牌时，将其添加到payload中
  if (param && token) {
    payload[param] = token;
  }
  
  // 将payload转为JSON字符串，包装成Blob以适配sendBeacon的要求
  return new Blob(
    [JSON.stringify(payload)], 
    { type: "application/x-www-form-urlencoded; charset=UTF-8" }
  );
}

关键逻辑说明： #

• 页面卸载触发：使用unload事件确保页面关闭、刷新时都会触发数据上报，navigator.sendBeacon是浏览器专门为这类场景设计的API，能保证请求在页面卸载流程中异步完成，不会阻塞页面关闭。
• CSRF验证适配：Rails后端默认对POST请求要求CSRF令牌验证，这里通过读取页面中Rails自动注入的meta标签，把令牌添加到请求数据中，确保后端能通过验证。
• 格式转换：navigator.sendBeacon发送JSON数据时需要包装成Blob格式，同时指定application/x-www-form-urlencoded类型，适配Rails默认的参数解析规则。

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