Laravel评论API与React对接异常求助：Postman正常React提交无数据入库

开发者阿泽

2026-7-15

问题：React表单提交评论无法存入数据库，Postman测试正常

我开发了一个添加评论的Laravel API，Postman测试可正常执行，但通过React页面提交表单时，浏览器控制台无报错，输入的数据却无法存入数据库。以下是相关代码和截图，求解决办法。

React组件代码

//tambah komentar
import axios from "axios";
import React from "react";
import { Link } from "react-router-dom";

function Tambahkomentar() {
  const [nama, setNama] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [komentar, setKomentar] = React.useState("");
  let id = localStorage.getItem("id");
  id = JSON.parse(id);

  const handleSubmit = async () => {
    const id_mading = id;
    const res = await axios.post("http://127.0.0.1:8000/api/komentar/create", {
      id_mading,
      nama,
      email,
      komentar,
    });
    const { status } = res.data;
    if (status === 200) {
      alert("Berhasil tambah komentar");
      setNama("");
      setEmail("");
      setKomentar("");
    } else {
      alert("Gagal menambahkan komentar");
    }
  };
  return (
    <div>
      <nav className="border-red-800 bg-red-800 dark:bg-red-800 dark:border-red-800">
        <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
          <a href="https://www.gunadarma.ac.id/" className="flex items-center">
            <img
              src="asset/pesawat.png"
              className="h-8 mr-3"
              alt="Flowbite Logo"
            />
            <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
              Mading Online
            </span>
          </a>
          <button
            data-collapse-toggle="navbar-solid-bg"
            type="button"
            className="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
            aria-controls="navbar-solid-bg"
            aria-expanded="false"
          >
            <span className="sr-only">Open main menu</span>
            <svg
              className="w-6 h-6"
              aria-hidden="true"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fillRule="evenodd"
                d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                clipRule="evenodd"
              ></path>
            </svg>
          </button>
          <div
            className="hidden w-full md:block md:w-auto"
            id="navbar-solid-bg"
          >
            <ul className="flex flex-col font-medium mt-4 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 md:dark:bg-transparent dark:border-gray-700">
              <li>
                <Link
                  to="#"
                  className="block py-2 pl-3 pr-4 text-yellow-500 bg-blue-700 rounded md:bg-transparent md:text-white-700 md:p-0 md:dark:text-white-500 dark:bg-blue-600 md:dark:bg-transparent"
                  aria-current="page"
                >
                  Artikel
                </Link>
              </li>
              <li>
                <Link
                  to="#"
                  className="block py-2 pl-3 pr-4 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-yellow-300 md:p-0 dark:text-white md:dark:hover:text-yellow-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
                >
                  Login
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div className="bg-green-200 py-32 px-10 min-h-screen ">
        <div className="bg-white p-10 md:w-3/4 lg:w-1/2 mx-auto">
          <form onSubmit={handleSubmit}>
            <div className="flex items-center mb-5">
              <label
                className="inline-block w-20 mr-6 text-right 
                                 font-bold text-gray-600"
              >
                Nama
              </label>
              <input
                type="text"
                id="name"
                name="name"
                placeholder="Name"
                className="flex-1 py-2 border-b-2 border-gray-400 focus:border-green-400 
                      text-gray-600 placeholder-gray-400
                      outline-none"
                onChange={(e) => setNama(e.target.value)}
              />
            </div>

            <div className="flex items-center mb-10">
              <label
                className="inline-block w-20 mr-6 text-right
                                    font-bold text-gray-600"
              >
                Email
              </label>
              <input
                type="text"
                id="twitter"
                name="twitter"
                placeholder="Email"
                className="flex-1 py-2 border-b-2 border-gray-400 focus:border-green-400 
                text-gray-600 placeholder-gray-400
                outline-none"
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>

            <div className="flex items-center mb-10">
              <label
                className="inline-block w-20 mr-6 text-right
                                    font-bold text-gray-600"
              >
                Komentar
              </label>
              <input
                type="text"
                id="twitter"
                name="twitter"
                placeholder="Komentar"
                className="flex-1 py-2 border-b-2 border-gray-400 focus:border-green-400 
                text-gray-600 placeholder-gray-400
                outline-none"
                onChange={(e) => setKomentar(e.target.value)}
              />
            </div>

            <div className="text-right">
              <button className="py-3 px-8 bg-green-400 text-white font-bold">
                Submit
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default Tambahkomentar;

Laravel控制器代码

public function create(Request $request)
{
  $request->validate([
    'id_mading' => 'required',
    'nama' => 'required',
    'email' => 'required|email',
    'komentar' => 'required',
  ]);

  $komentar = Komentar::create([
    'id_mading' => $request->id_mading,
    'nama' => $request->nama,
    'email' => $request->email,
    'komentar' => $request->komentar,
  ]);

  return response()->json([
    'message' => 'Komentar Successfully created',
    'data' => $komentar,
    'status' => 200,
  ]);
  
}

Laravel路由配置

Route::post('create', [KomentarController::class, 'create']);

相关截图

控制台无报错截图

控制台无报错

网络请求截图

网络请求

解决方案

阻止表单默认提交行为
React表单提交会触发默认页面刷新，中断axios请求。修改handleSubmit函数，添加参数并阻止默认行为：

const handleSubmit = async (e) => {
  e.preventDefault(); // 阻止默认提交逻辑
  const id_mading = id;
  try {
    const res = await axios.post("http://127.0.0.1:8000/api/komentar/create", {
      id_mading,
      nama,
      email,
      komentar,
    });
    const { status } = res.data;
    if (status === 200) {
      alert("Berhasil tambah komentar");
      setNama("");
      setEmail("");
      setKomentar("");
    } else {
      alert("Gagal menambahkan komentar");
    }
  } catch (err) {
    console.error(err); // 捕获错误方便调试
    alert("请求出错，请查看控制台");
  }
};

配置Laravel跨域（CORS）
浏览器存在跨域限制，需在Laravel中配置CORS：

安装跨域包：

composer require barryvdh/laravel-cors

发布配置文件：

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

修改config/cors.php，允许React项目域名：

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:5173'], // React项目地址
    'allowed_headers' => ['*'],
    'supports_credentials' => false,
];

在app/Http/Kernel.php的$middleware数组中添加：

\Barryvdh\Cors\HandleCors::class,

验证请求数据完整性

在React的handleSubmit开头添加日志，确认数据是否正确：

console.log('提交的id_mading:', id_mading);
console.log('表单数据:', { nama, email, komentar });

在Laravel控制器中添加日志，检查接收的数据：

public function create(Request $request)
{
  \Log::info('收到的请求数据:', $request->all());
  // 后续代码...
}

查看storage/logs/laravel.log确认数据是否正确接收。

检查模型可填充字段
确保Komentar模型设置了$fillable属性，允许批量赋值：

class Komentar extends Model
{
    protected $fillable = ['id_mading', 'nama', 'email', 'komentar'];
}

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

Laravel评论API与React对接异常求助：Postman正常React提交无数据入库

React组件代码 #

Laravel控制器代码 #

Laravel路由配置 #

相关截图 #

控制台无报错截图 #