React向Rails后端发POST请求返回400的JSON格式问题排查

问题1：是否需要移除ordertemp包裹层 #

不需要移除该包裹层，这个嵌套结构本身是符合Rails强参数约定的，核心问题是你传的ordertemp对应值是数组，而非后端要求的单个对象。
你Postman测试能成功，是因为Rails默认开启了参数自动包装（Wrap Parameters），会自动把请求里的模型属性包到和控制器同名的参数键下，所以两种传参格式都能被识别：

1. 根节点直接传amount/name/price三个字段（Rails自动包装成ordertemp: {xxx}结构）
2. 显式传ordertemp: {amount: xxx, name: xxx, price: xxx}结构
   但你当前前端传的是ordertemp: [对象数组]，不管是自动包装还是手动传，ordertemp键对应的值必须是单对象，不能是数组，这是你当前参数结构的核心错误。
   如果是单次提交单个订单项，直接把数组替换成单个对象即可；如果是要批量提交购物车所有商品，需要同步修改后端的批量创建逻辑，不能直接用单条Ordertemp.new的写法。

问题2：其他导致请求失败的写法/配置问题 #

• fetch配置项大小写错误：你写的请求体配置是全大写的BODY，fetch API识别的配置项是小写body，大写属性会被直接忽略，等于你根本没把请求体发出去。
• 缺少JSON请求头：发送JSON格式请求必须添加Content-Type: application/json请求头，否则Rails会把请求体按普通表单格式解析，无法正确识别JSON结构，直接报参数错误。
• 后端错误响应写法错误：create动作里失败分支写的render error: { error: 'Unable to create an order'}, status: 400是无效写法，render必须指定响应格式（比如json:），否则就算参数正确，保存失败时也会抛出500服务器错误。
• 跨域配置缺失（隐藏问题）：如果你的React项目和Rails服务运行在不同端口（比如React跑在5173、3001端口，Rails跑在3000端口），没配置跨域允许规则的话，浏览器会直接拦截请求，根本到不了后端逻辑。

修正代码参考 #

前端请求修正（单条订单项提交场景） #

await fetch("http://localhost:3000/ordertemps", {
  method: 'POST',
  // 修正：配置项使用小写body
  body: JSON.stringify({
    // 两种写法二选一即可，Rails都能识别
    // 写法1：直接传字段，靠Rails自动包装
    // name: "Cheese and Loroco",
    // amount: 1,
    // price: "1.25"

    // 写法2：显式传ordertemp包裹的单对象
    ordertemp: {
      name: "Cheese and Loroco",
      amount: 1,
      price: "1.25"
    }
  }),
  // 修正：添加JSON请求头
  headers: {
    'Content-Type': 'application/json'
  }
});

后端代码修正 #

1. 修复create动作的错误响应：

def create
  @ordertemp = Ordertemp.new(ordertemp_params)
  if @ordertemp.save
    render json: @ordertemp
  else
    # 指定json响应格式，同时返回校验错误信息方便排查
    render json: { error: 'Unable to create an order', details: @ordertemp.errors.full_messages }, status: :bad_request
  end
end

2. 配置跨域支持（前后端不同端口时必须配置）：
   先在Gemfile中添加gem 'rack-cors'，执行bundle install安装依赖，再编辑config/initializers/cors.rb文件添加如下配置：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 替换为你的React项目实际运行的地址端口
    origins 'localhost:5173'
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

配置完成后重启Rails服务即可生效。

如果你需要批量提交购物车内的所有商品，不能直接沿用当前单条创建的逻辑，需要调整后端强参数规则为接收数组格式，同时改用Ordertemp.insert_all等批量写入方法实现。

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