React注册数据无法写入Laravel11数据库，登录报419错误求助

一、注册表单未提交数据到后端（signup.jsx） #

当前注册表单仅完成前端验证，未发送请求到Laravel后端。同时字段命名与后端验证规则不匹配，需两处修改：

1. 新增后端请求逻辑 #

// 先导入依赖
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

// 组件内初始化导航钩子
const navigate = useNavigate();

// 修改handleSubmit中的isValid分支
if (isValid) {
  try {
    // 调整字段名适配Laravel的password:confirmed验证规则
    const submitData = {
      ...formData,
      password_confirmation: formData.confirmPsw
    };
    delete submitData.confirmPsw;
    
    // 发送注册请求到后端API路由
    const response = await axios.post('http://127.0.0.1:8000/api/register', submitData);
    console.log('注册成功:', response.data);
    navigate('/login'); 
  } catch (error) {
    console.error('注册失败:', error.response?.data?.message || error.message);
  }
}

2. 修改确认密码输入框name属性 #

<input 
  type={passwordVisible ? 'text' : 'password'} 
  placeholder="Confirm Password" 
  name="password_confirmation"  // 替换原name="confirmPsw"
  value={formData.confirmPsw} 
  onChange={handleInputChange} 
  required 
/>

二、登录请求419错误（login.jsx） #

419错误是CSRF令牌验证失败，需先获取Sanctum的CSRF Cookie，同时修正路由地址与跳转逻辑：

// 导入依赖
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate(); // 初始化导航钩子

  const handleSubmit = async (event) => {
    event.preventDefault();
    let errors = {};
    let isValid = true;

    // 原有前端验证代码保持不变

    if (isValid) {
      try {
        // 第一步：获取CSRF Cookie
        await axios.get('http://127.0.0.1:8000/sanctum/csrf-cookie');
        // 第二步：发送登录请求到正确的API路由
        const response = await axios.post('http://127.0.0.1:8000/api/login', formData);
        console.log('登录成功:', response.data);
        // 用navigate跳转，替换原返回<Link>的错误写法
        navigate('/'); 
      } catch (error) {
        console.error('登录失败:', error.response?.data?.message || error.message);
      }
    }
  };

  // 修正错误提示的判断逻辑
  // 原代码：{formErrors.username && <span className="error">{formErrors.name}</span>}
  // 修改为：
  {formErrors.name && <span className="error">{formErrors.name}</span>}
};

三、后端路由与逻辑错误（api.php + RegisteredUserController.php） #

当前登录路由指向注册逻辑，需新增独立的登录处理方法：

1. 修正api.php路由 #

Route::post('/register', [RegisteredUserController::class, 'storeAPI']);
// 新增登录路由，指向专属方法
Route::post('/login', [RegisteredUserController::class, 'loginAPI']);

2. 添加登录处理方法到RegisteredUserController #

use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;

// 注册方法保持不变，新增以下登录方法
public function loginAPI(Request $request){
    $request->validate([
        'name' => ['required', 'string'],
        'password' => ['required', 'string'],
    ]);

    // 验证用户凭证
    if (!Auth::attempt($request->only('name', 'password'))) {
        return response()->json([
            'message' => '用户名或密码错误'
        ], 401);
    }

    $user = Auth::user();
    $token = $user->createToken('api_token')->plainTextToken;
    
    return [
        'user' => $user,
        'token' => $token,
        'status' => 200 // 修正原代码的拼写错误：staus → status
    ];
}

同时修正注册方法中的拼写错误：将'staus' => 201改为'status' => 201。

四、CORS配置检查 #

1. 确保cors.php中的allowed_origins与前端运行地址完全一致（比如前端是http://localhost:3000就不要写IP，反之亦然）。
2. 确认自定义CorsMiddleware已在app/Http/Kernel.php的api中间件组中注册：

protected $middlewareGroups = [
    'api' => [
        \App\Http\Middleware\CorsMiddleware::class,
        // 其他中间件...
    ],
];

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