Rails中如何使用Fetch传递变量？传worker id报422错误怎么解决

错误原因 #

你遇到的422错误核心是Rails默认对非GET请求校验CSRF令牌，你的fetch请求未携带该令牌，同时可以优化参数传递格式适配后端取值逻辑。

具体修改步骤 #

1. 添加CSRF令牌到请求头
   在你的JS代码中先获取页面内置的CSRF令牌，放到fetch请求的headers配置中：

// 先获取CSRF令牌
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

async function postData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': csrfToken // 新增CSRF校验头
    },
    body: JSON.stringify(data)
  });
  return response.json();
}

// 参数名改成明确的worker_id，方便后端直接取值
postData('/application/percentage_done', { worker_id: '<%= @worker_id %>' })
  .then(res=> { console.log(res) });

2. 后端控制器取值示例
   在ApplicationController的percentage_done动作中直接取参数即可：

def percentage_done
  worker_id = params[:worker_id]
  # 你的任务进度查询逻辑
  render json: { percentage: 对应进度值, status: "success" }
end

特殊场景适配 #

如果你的JS代码是独立的静态.js文件，无法解析ERB语法的<%= @worker_id %>，可以提前把worker_id写入视图的自定义数据属性：

<!-- 在视图文件中添加占位标签 -->
<div id="progress-container" data-worker-id="<%= @worker_id %>"></div>

再在JS中读取该属性值：

const workerId = document.querySelector('#progress-container').dataset.workerId;
postData('/application/percentage_done', { worker_id: workerId })
  .then(res=> { console.log(res) });

可选临时方案（不推荐生产用） #

如果是内部接口不需要CSRF校验，可以在控制器中跳过校验逻辑：

class ApplicationController < ActionController::Base
  skip_before_action :verify_authenticity_token, only: [:percentage_done]
  # 其余逻辑
end

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