Vue POST请求传递ID到Rails控制器无法接收参数问题

你的代码存在三处不匹配，导致参数无法正常接收：

• 请求方法不匹配：路由配置的是GET方法，前端实际发送的是POST请求，会直接触发405 Method Not Allowed错误，请求根本到不了控制器逻辑
• 参数位置不匹配：路由定义要求id作为URL路径段参数（格式为current_ticket_id/:id），但前端没有把id拼到URL上，反而放在了JSON请求体中
• 参数名不匹配：控制器代码读取的是params[:id]，前端请求体里传的参数键是ticket_id，就算请求体正常解析也读不到对应值

二选一即可，根据你自己的接口设计习惯选择。 #

方案1：保留路径传参的REST风格设计 #

这种方式不需要修改控制器读取参数的逻辑，只需要对齐请求方法、参数位置即可：

1. 修改路由配置，把GET改成匹配前端的POST方法，保留路径id占位符：

def draw_ticket_id
  controller: 'ticket_id' do
    post 'current_ticket_id/:id', action: 'create'
  end
end

2. 修改前端请求代码，把ticketId直接拼到请求URL路径上，不需要在请求体中重复传递：

forwardTicketId(ticketId) {
  const requestOptions = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    // 无其他请求载荷时可以删掉body字段，有额外参数再保留
  };
  fetch(
    `http://localhost:3000/home/current_ticket_id/${ticketId}`,
    requestOptions
  )
    .then((response) => response.json())
    .then((data) => console.log(data));
},

改完后控制器里的params[:id]可以直接拿到传入的ticketId值，不需要调整控制器代码。 #

方案2：保留前端请求体传参的写法 #

这种方式不需要修改前端传参逻辑，调整路由和控制器参数读取逻辑即可：

1. 修改路由配置，去掉路径上的:id占位符，匹配POST请求方法：

def draw_ticket_id
  controller: 'ticket_id' do
    post 'current_ticket_id', action: 'create'
  end
end

2. 修改控制器代码，从请求体参数中读取ticket_id：

module Panel
  class TicketIdController < HomeController
    def create
      ticket_id = params[:ticket_id].to_i
      result = Home::UtilityClasses::ActionClass.new(ticket_id).call
      render json: { reply: result }
    end
  end
end

开发环境注意确认：如果接口存在跨域、请求参数解析异常的情况，检查app/controllers/application_controller.rb中是否配置了protect_from_forgery with: :null_session，Rails默认会自动解析Content-Type: application/json的请求体到params哈希中，不需要额外做解析配置。

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