0

I am fairly new to web developing and i am currently practicing with laravel and react.

At the moment i have a problem with a api call (post) getting back an error 500.

Here is the php code:

Model

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

Controller

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

Api route

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

Here is the js code:

service (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();
    })
  }

component (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;

Here is the error:

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
[...]

What I've done:

  • The same call works fine with postman.
  • There is the csrf-token in my html head.

Any suggestion?

2 Answers 2

0

Check with the console in browser. You might want to enable CORS from the backend

Sign up to request clarification or add additional context in comments.

1 Comment

Hello Vizard, I tried but the problem still remain. Thanks for your suggestion.
0

If anyone will ever need an answer, I found it.

  1. Be sure to configure correctly your authentication system! In my case I was using Laravel Sanctum system forgetting a few things. Here is the docs: https://laravel.com/docs/9.x/sanctum#spa-authentication

  2. Add the CSRF Token to the POST request! Here some info: How to get Laravel CSRF-token for sending it through fetch post request in React?

Have a nice day, night or anything you like!

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.