【备忘录】在Laravel内部创建API，并从React向Laravel发送表单数据

首先

个人开发备忘录?
解决在laravel内部创建API并在react->laravel之间进行表单数据传输时出现的错误。

回应的一方

用fetch方法将表单数据发送到Laravel。

import React, { useState } from 'react';

function RegistrationForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
  });

  // フォーム入力の反映
  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };
  
  // フォーム送信処理
  const handleSubmit = (event) => {
    event.preventDefault();

    // laravelのエンドポイント
    const apiUrl = '/api/register';

    const requestOptions = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': window.csrfToken,
      },
      body: JSON.stringify(formData),
    };
    console.log(requestOptions);

    // Postリクエストを送信
    fetch(apiUrl,requestOptions)
      .then(function(response) {
        return response.json();
      })
      .then(data => {
        console.log('送信完了', data);
      })
      .catch(error => {
        console.log('エラー', error);
      });
   }
}

Laravel的一面

// react側からフォーム送信で使用するエンドポイント
Route::post('/register', [RegisterController::class, 'register']);

当在api.php中写入时，URI前缀将自动添加/api，所以请注意（我写成了/api/register，但在php artisan route:list中确认时变成了/api/api/register）。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Hash;

class RegisterController extends Controller {
  public function register(Request $request) {
    $formData = $request->validate([
      'name' => 'required | string | max:255',
      'email' => 'required| string | email | unique:users',
      'password' => 'required | string | min: 8',
    ]);

    $user = User::create([
      'name' => $request->input('name'),
      'email' => $request->input('email'),
      'password' => Hash::make($request->input('password')),
    ]);
    return response()->json(['message' => 'ユーザー登録が完了しました', 'user' => $user]);
  }
}

最后

// laravelのエンドポイント
    const apiUrl = '/api/register';

// react側からフォーム送信で使用するエンドポイント
Route::post('/register', [RegisterController::class, 'register']);

虽然制作本身很简单，但由于不了解写作方法而花费了很多时间来解决错误。