React+Rails前后端注册请求报500内部服务器错误求助

我是编程新手，正在用React做前端、Ruby on Rails做后端开发应用。点击注册按钮向服务器发送请求时，一直收到500内部服务器错误，找不到问题根源，求帮助！

控制台信息 #

POST http://localhost:4000/users 500 (Internal Server Error)
SignUp.js:26 
Response {type: 'basic', url: 'http://localhost:4000/users', redirected: false, status: 500, ok: false, …} body: (...) body Used: true headers: Headers {} ok: false redirected: false status: 500 statusText: "Internal Server Error" type: "basic" url: "http://localhost:4000/users" [[Prototype]]: Response

访问localhost时额外报错：

GET http://localhost:3000/me 500 (Internal Server Error)
favicon.ico:1 GET http://localhost:3000/favicon.ico 500 (Internal Server Error)

Rails服务器日志 #

ArgumentError (wrong number of arguments (given 0, expected 1..2)):
  
app/controllers/users_controller.rb:2:in `<class:UsersController>'
app/controllers/users_controller.rb:1:in `<main>'
Started POST "/users" for 127.0.0.1 at 2022-11-02 23:09:07 -0400
  
ArgumentError (wrong number of arguments (given 0, expected 1..2)):
  
app/controllers/users_controller.rb:2:in `<class:UsersController>'
app/controllers/users_controller.rb:1:in `<main>'

React前端代码 #

import React from 'react';
import { useState } from "react";

function SignUp() {

    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    
    function handleSignUp(e) {
        e.preventDefault()
        
        const user = {
            username,
            password
        }

        fetch("/users",{
            method: "POST",
            header: {
                "Content-Type" : "application/json"
            },
            body: JSON.stringify(user)
        }).then(r => {
            r.json()
            console.log(r)
        })
    }


    return (
        <div>
        <form onSubmit={handleSignUp}>
            <p>Username</p>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
            <p>Password</p>
         <input
          type="text"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />

        <button type="submit">Sign Up</button>
      </form>
        </div>
    );
}

export default SignUp;

Rails路由配置 #

Rails.application.routes.draw do
  
  # Routing logic: fallback requests for React Router.
  # Leave this here to help deploy your app later!

  post "/login", to: "sessions#create"
  delete "logout", to: "sessions#destroy"

  get "/me", to: "users#show"
  post "/users", to: "users#create"
 
  get "*path", to: "fallback#index", constraints: ->(req) { !req.xhr? && req.format.html? }

end

Rails用户控制器代码 #

class UsersController < ApplicationController
    wrap_parameters
rescue_from ActiveRecord:RecordInvalid, with: :record_invalid_response

    def create
        user = User.create!(user_params)
        render json: user, status: :created
    rescue ActiveRecord::RecordInvalid => invalid
    end

    def show
        user = User.find(session[:user_id])
        if user
            render json: user
        else
            render json: { error: "Not authorized" }, status: :unauthorized
        end
    end

    private

    def user_params
        params.permit(:username, :password)
        # :first_name, :last_name, :phone_number, :email
    end

    def record_invalid_response(user)
        render json: {error: user.errors.full_messages}, status: :unprocessable_entity
    end

end

问题修复方案 #

1. 修复Rails控制器核心错误 #

• wrap_parameters参数缺失：第2行wrap_parameters需要指定参数名，改为wrap_parameters :user, format: [:json]，告诉Rails将JSON请求体包裹到:user键下，匹配user_params的解析逻辑。
• 语法错误修正：第3行ActiveRecord:RecordInvalid应为ActiveRecord::RecordInvalid（双冒号），否则无法正确捕获异常。
• 冗余代码清理：create方法中的rescue块是空的，直接删除即可，因为已经通过rescue_from全局处理了异常。

修复后的控制器核心片段：

class UsersController < ApplicationController
    wrap_parameters :user, format: [:json]
    rescue_from ActiveRecord::RecordInvalid, with: :record_invalid_response

    def create
        user = User.create!(user_params)
        render json: user, status: :created
    end

    # 其余代码不变
end

2. 修复React前端请求错误 #

• 请求头字段名错误：fetch配置中的header应为headers（复数），否则服务器无法识别JSON请求体格式。
• Promise链式调用优化：r.json()需要return才能传递到下一个then，同时添加错误捕获逻辑。

修复后的fetch代码：

fetch("/users",{
    method: "POST",
    headers: {
        "Content-Type" : "application/json"
    },
    body: JSON.stringify(user)
}).then(r => {
    return r.json()
}).then(data => {
    console.log(data)
}).catch(error => {
    console.error('注册失败:', error)
})

3. 其他潜在问题优化 #

• User模型密码处理：建议在User模型中添加has_secure_password，并确保数据库有password_digest字段，用于密码加密存储。
• users#show权限判断：先检查session[:user_id]是否存在，避免未登录时触发查询错误：

def show
    if session[:user_id]
        user = User.find(session[:user_id])
        render json: user
    else
        render json: { error: "Not authorized" }, status: :unauthorized
    end
end

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