对 Api (Laravel) 的 REACT 调用 (Post) 返回错误 500答案

【问题标题】：REACT call (Post) to Api (Laravel) return error 500对 Api (Laravel) 的 REACT 调用 (Post) 返回错误 500
【发布时间】：2022-07-04 22:16:03
【问题描述】：

我对 Web 开发相当陌生，目前正在使用 laravel 和 react 进行练习。

目前我遇到一个问题，API 调用（发布）返回错误 500。

这里是php代码：

型号

protected $fillable = [
    'id',
    'name',
    'address',
    'phone',
    'email'

控制器

public function store(Request $request)
{
    $customer = Customer::create($request->all());
    return response()->json($customer, 201);
}

API 路由

Route::apiResource('customers', 'App\Http\Controllers\CustomerController');

这里是js代码：

服务（customers.js）

  export async function addCustomer(customer) 
  {
    fetch( '/api/customers/', 
    {
      method:'post',
      headers: 
      {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(customer)
    })
    .then(response => 
    {
      console.log(response);
      return response.json();
    })
  }

组件（CustomerForm.js）

const CustomerForm = ({customer, showForm}) => {
    [...]
    const handleSubmit = (e) => 
        {
        e.preventDefault(); 
        addCustomer(model)
        .then(i => {}, 
            error => 
              {
              console.log(error.message)
              })
        .catch(e => 
          {
          console.log(e)
          console.log(response)
          }); 
         }

    /**
     * render
     */
    return (
        [...]
    );
}

export default CustomerForm;

这是错误：

POST http://127.0.0.1:8000/api/customers/ 500 (Internal Server Error)
_callee3$   @   app.js:6606
tryCatch    @   app.js:6524
(anonymous) @   app.js:6524
(anonymous) @   app.js:6524
asyncGeneratorStep  @   app.js:6526
_next   @   app.js:6528
(anonymous) @   app.js:6528
(anonymous) @   app.js:6528
_addCustomer    @   app.js:6625
addCustomer @   app.js:6594
handleSubmit    @   app.js:5704
onSubmit    @   app.js:5725
[...]

我做了什么：

同样的调用也适用于邮递员。
我的 html 头中有 csrf-token。

有什么建议吗？

【问题讨论】：

标签： reactjs laravel post http-status-code-500

【解决方案1】：

在浏览器中使用控制台检查。您可能希望从后端启用 CORS

【讨论】：