I’m facing an issue when trying to execute a POST request from the frontend using Axios to a Laravel controller method. The request URL returns a 404 error as below.
AxiosError {message: ‘Request failed with status code 404’, name: ‘AxiosError’, code: ‘ERR_BAD_REQUEST’, config: {…}, request: XMLHttpRequest, …}
My project uses a custom database connection middleware. Below are the detailed configurations and code snippets:
web.php
use AppHttpControllersClientDataController;
use AppHttpControllersQueryController;
use AppHttpControllersRecordingController;
use IlluminateSupportFacadesRoute;
Route::middleware(['auth', 'verified'])->group(function () {
Route::get('/dashboard', fn() => Inertia::render('Dashboard'))->name('dashboard');
// Routes that do not need the connection middleware
Route::get('/clients', [ClientDataController::class, 'index'])->name('client.index');
Route::get('/clients/create', [ClientDataController::class, 'create'])->name('client.create');
Route::post('/clients', [ClientDataController::class, 'store'])->name('client.store');
Route::delete('/clients/{client}', [ClientDataController::class, 'destroy'])->name('clients.destroy');
Route::post('/set-connection', [ClientDataController::class, 'setConnection'])->name('set-connection');
// Routes that need the connection middleware
Route::middleware(['connection'])->group(function () {
Route::get('/clients/{connection}/queries', [ClientDataController::class, 'show'])->name('clients.show');
// Queries
Route::get('/queries', [QueryController::class, 'index'])->name('query.index');
Route::get('/queries/create', [QueryController::class, 'create'])->name('query.create');
Route::post('/queries/store', [QueryController::class, 'store'])->name('query.store');
Route::get('/queries/{id}', [QueryController::class, 'show'])->name('query.show');
Route::get('/queries/{id}/edit', [QueryController::class, 'edit'])->name('query.edit');
Route::put('/queries/{id}', [QueryController::class, 'update'])->name('query.update');
Route::delete('/queries/{id}', [QueryController::class, 'destroy'])->name('query.destroy');
Route::post('/query/verify', [QueryController::class, 'verify'])->name('query.verify');
// Recordings
**Route::post('/recordings/execute/{query}', [RecordingController::class, 'recordQueryExecution'])->name('recording-execution');
});**
});
I’m so confusing why the error only happens in the ‘/recordings/execute/{query}’
I think the function ‘recordQueryExecution’ in the RecordingController is fine because when I executed it with query.store or quey.update. It’s work.
RecordingController.php
namespace AppHttpControllers;
use AppModelsQuery;
use AppModelsRecording;
use IlluminateSupportFacadesAuth;
use IlluminateSupportFacadesDB;
use IlluminateHttpRequest;
class RecordingController extends Controller
{
public function recordQueryExecution(Query $query)
{
try {
$result = DB::select($query->query_sql);
$csvFilePath = $this->generateCsvFile($query->id, $result);
$recording = new Recording();
$recording->query_id = $query->id;
$recording->query_sql = $query->query_sql;
$recording->csv_file_path = $csvFilePath;
$recording->updated_by = Auth::id();
$recording->updated_at = now();
$recording->status = 'success';
$recording->save();
return response()->json(['success' => true]);
} catch (Exception $e) {
$recording = new Recording();
$recording->query_id = $query->id;
$recording->query_sql = $query->query_sql;
$recording->updated_by = Auth::id();
$recording->updated_at = now();
$recording->status = 'fail';
$recording->fail_reason = $e->getMessage();
$recording->save();
return response()->json(['success' => false, 'message' => $e->getMessage()], 500);
}
}
private function generateCsvFile($queryId, $result)
{
$csvDir = storage_path("app/public/csv");
if (!file_exists($csvDir)) {
mkdir($csvDir, 0777, true);
}
$csvFileName = "query_{$queryId}_" . now()->format('Ymd_His') . '.csv';
$csvFilePath = "{$csvDir}/{$csvFileName}";
$file = fopen($csvFilePath, 'w');
if (!empty($result)) {
fputcsv($file, array_keys((array)$result[0]));
}
foreach ($result as $row) {
fputcsv($file, (array)$row);
}
fclose($file);
return $csvFileName;
}
}
Axios Request in Show.jsx:
import axios from 'axios';
const runQuery = async (queryId) => {
try {
const response = await axios.post(`/recordings/execute/${queryId}`);
if (response.data.success) {
window.location.reload();
} else {
console.error("Error running query:", response.data.message);
}
} catch (error) {
console.error("Error running query:", error);
}
};
I’m not sure but maybe it’s the reason I used the wrong way to register the middleware.
bootstrap/app.php
<?php
use IlluminateFoundationApplication;
use IlluminateFoundationConfigurationExceptions;
use IlluminateFoundationConfigurationMiddleware;
return Application::configure(basePath: dirname(__DIR__))
->withRouting(
web: __DIR__.'/../routes/web.php',
commands: __DIR__.'/../routes/console.php',
health: '/up',
)
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
AppHttpMiddlewareHandleInertiaRequests::class,
IlluminateHttpMiddlewareAddLinkHeadersForPreloadedAssets::class,
AppHttpMiddlewareConnection::class,
]);
$middleware->alias([
'connection' => AppHttpMiddlewareConnection::class,
]);
})
->withExceptions(function (Exceptions $exceptions) {
//
})->create();
Are there any obvious issues with my routes or controller methods that might be causing this 404 error?
Tried
1.Verified the routes in web.php are correctly set.
2.Confirmed that the recordQueryExecution method works when called directly from QueryController.
