Rails 7中Turbo Streams+Stimulus请求400错误：参数未传递

点击"Connect"按钮后触发400 Bad Request错误，页面刷新。Rails日志显示仅收到路由参数，未获取到预期的连接请求参数：

#<ActionController::Parameters {"controller"=>"connections", "action"=>"create"} permitted: false>

相关代码 #

前端link_to代码 #

<%= link_to "Connect", connections_path, class:"btn btn-primary", data: { controller:"connections", turbo_method: :post, requester_id: current_user.id, connected_id: user.id, connections_target:"connection" } %>

StimulusJS Connections控制器 #

import { Controller } from "@hotwired/stimulus";

// Connects to data-controller="connections"
export default class extends Controller {
 static targets = ["connection"];

 connect() {}

 initialize() {
 this.element.setAttribute("data-action", "click->prepareConnectionParams");
  }

 prepareConnectionParams(event) {
    event.preventDefault();

 this.url = this.element.getAttribute("href");

 const element = this.connectionTarget;
 const requesterId = element.dataset.requesterId;
 const connectedId = element.dataset.connectedId;

 const connectionBody = new FormData();

    connectionBody.append("connection[user_id]", requesterId);
    connectionBody.append("connection[connected_user_id]", connectedId);
    connectionBody.append("connection[status]", "pending");

    console.log("Connection Body:", connectionBody);

 fetch(this.url, {
      method: "POST",
      headers: {
        Accept: "text/vnd.turbo-stream.html",
 "X-CSRF-Token": document
        .querySelector('meta[name="csrf-token"]')
        .getAttribute("content"),
      },

      body: connectionBody,
    })
    .then((response) => response.text())
    .then((html) => Turbo.renderStreamMessage(html));
 }
}

后端ConnectionsController.rb代码 #

class ConnectionsController < ApplicationController 
  before_action :authenicate_user!
 
 def create
 Rails.logger.debug "Params received: #{params.inspect}"

    @connection = current_user.connections.new(connection_params)
    @connector = User.find(connection_params[:connected_user_id])

    respond_to do |format|
 if @connection.save
        format.turbo_stream { 
          render turbo_stream:
          turbo_stream.replace(
 "user-connection-status",
 partial: "connection/create",
 locals: { connector: @connector }
          )
        }
 end
 end
 end

 private
 def connection_params
    params.require(:connection).permit(:user_id, :connected_user_id, :status)
 end
end

问题根源与修复方案 #

1. 后端拼写错误导致认证拦截 #

before_action :authenicate_user!中的authenicate拼写错误，正确应为authenticate_user!。这个错误会导致用户未正确认证就进入create动作，可能触发参数校验失败。

修复：

before_action :authenticate_user!

2. Stimulus参数获取逻辑错误 #

代码中通过connectionTarget获取元素，但实际上目标元素就是控制器绑定的当前link元素，无需额外通过target查找。同时手动设置data-action的方式容易引发事件绑定冲突。

修复Stimulus控制器：

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  connect() {
    this.element.addEventListener('click', this.prepareConnectionParams.bind(this));
  }

  prepareConnectionParams(event) {
    event.preventDefault();

    const url = this.element.getAttribute("href");
    // 直接从当前元素的dataset读取参数
    const requesterId = this.element.dataset.requesterId;
    const connectedId = this.element.dataset.connectedId;

    const connectionBody = new FormData();
    // user_id可由current_user自动关联，无需前端传递，提升安全性
    connectionBody.append("connection[connected_user_id]", connectedId);
    connectionBody.append("connection[status]", "pending");

    // 正确打印FormData内容，验证参数是否添加成功
    connectionBody.forEach((value, key) => {
      console.log(`${key}: ${value}`);
    });

    fetch(url, {
      method: "POST",
      headers: {
        "Accept": "text/vnd.turbo-stream.html",
        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
      },
      body: connectionBody
    })
    .then(response => {
      if (!response.ok) throw new Error(`HTTP状态码: ${response.status}`);
      return response.text();
    })
    .then(html => Turbo.renderStreamMessage(html))
    .catch(error => console.error("请求失败:", error));
  }
}

3. 简化HTML参数（可选） #

移除不必要的connections_target:"connection"，简化data属性：

<%= link_to "Connect", connections_path, class:"btn btn-primary", data: { controller:"connections", requester_id: current_user.id, connected_id: user.id } %>

4. 优化后端参数校验 #

由于current_user.connections.new已自动关联user_id，可移除connection_params中的:user_id参数，避免冗余：

private
def connection_params
  params.require(:connection).permit(:connected_user_id, :status)
end

额外排查点 #

• 查看浏览器Network面板，确认POST请求的Form Data部分是否包含参数；
• 确保current_user已正确登录，避免认证失败导致的请求异常；
• 验证Turbo Stream响应是否正确返回，避免页面无意义刷新。

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