message: The POST method is not supported for this route. Supported methods: GET, HEAD, PUT, PATCH, DELETE

Question

So I have an API route

Route::group(['prefix' => 'users'], function() {
  Route::group(['prefix' => 'seminar'], function() {
    Route::get('/{employee_number}', [UserProfileController::class, 'getSeminar']);
    Route::post('/{user}', [UserProfileController::class, 'createSeminar']);
    Route::put('/{seminar}', [UserProfileController::class, 'updateSeminar']);
    Route::delete ('/{seminar}', [UserProfileController::class, 'deleteSeminar']);
  });
});

And a controller

public function createSeminar(User $user, Request $request)
    {
        return $this->allowIfRecordOwner($user->id, function() use ($user, $request) {

            $seminar = Seminar::create([
                "user_id"           => $user->id,
                "dates"             => $request->dates,
                "name"              => $request->name,
                "certificate_number" => $request->certificate_number
            ]);
            return response()->json($seminar->toArray(), 200);
        });
    }

And im using that from my angular app

 private saveSeminar(index) {
    event.preventDefault();
    const seminar = this.userSeminars[index];
    if (seminar.id) {
      this.updateUserSeminar(index);
    } else {
      this.storeStudentAddress(index);
    }

  }

  private storeStudentAddress(index) {
    this.apiService.create('users/seminar', this.userSeminars[index])
    .subscribe(
    response => {
        this.userSeminars[index].edit = false;
        this.userSeminars[index].id = response.id;
        this.getUserSeminar(index.employee_number);
        this.toastr.success('Seminar Successfully saved', 'Success');
    });
  }

I have done php artisan route:list and found my router here

And I have now been staring at the error for over three hours and can't see why I'm getting the error. Any help would be wonderful

Answer 1

Your API endpoint in Laravel doesn't look like it lines up with your API endpoint in your JavaScript.

You need to hit this endpoint in order to create a seminar: api/users/seminar/{user}, where {user} is the user's ID.

Your line here: this.apiService.create('users/seminar', this.userSeminars[index]) looks like it's instead hitting api/users/seminar, without the user's ID appended to the end.

You just need to change it to this.apiService.create('users/seminar/' + USER_ID, ... where USER_ID is whatever variable you're using to store the user's ID, or alternatively a method which returns it.