419|PAGE EXPIRED in production, CSRF problem with Laravel 9 and Inertia?

Question

After deployment, when I try to use a delete route, this error is thrown:

419 | PAGE EXPIRED
Failed to load resource: the server responded with a status of 419 ()

Function inside vue component from where the route is triggered:

const destroyEvent = (record) => {
    if (confirm('Delete event?')) {
        Inertia.delete(route('admin.event.destroy', {
            id: record.id,
            title: record.title,
            image_path: record.image_path,
        }), { preserveScroll: true })
    }
}

Web route:

Route::delete('/admin/event/destroy', [EventsController::class, 'destroyEvent'])->name('admin.event.destroy');

The Request does not seem to reach EventsController, which I've tested with dd().

According to this stack question, it might be an CSRF token problem. I've tried everything proposed in there but it didn't help. Though commenting out:

\App\Http\Middleware\VerifyCsrfToken::class

from app\Kernel.php removes the 419 | PAGE EXPIRED screen and instead shows a blank page. Is this an indication of a CSRF problem?

From this laracasts question, I've also tried adding:

public function boot()
    {
        if($this->app->environment('production') || $this->app->environment('staging'))
        {
            \URL::forceScheme('https');
        }
    }

to AppServiceProvider.php with no improvement of the problem.

Any idea how to fix this?

Answer 1

I found a workaround by using form.delete instead of Inertia.delete:

const destroyEvent = (record) => {
    if (confirm('Delete Event?')) {
        const form = useForm({
            id: record.id,
            title: record.title,
            image_path: record.image_path
        })
        form.delete(route('admin.event.destroy'), { preserveScroll: true })
    }
}

It would be useful to know how the form helper handles CSRF different from Inertia.