Stop Laravel 9 from redirecting if AJAX validation fails

I have a Laravel 9 application and I am using Vue 3 and Filepond to create an image uploader experience.

<template>
    <file-pond
        max-files="1"
        name="images"
        server="/api/images"
        accepted-file-types="image/jpeg, image/png, image/gif, image/webp"
        :files="file"
    />
</template>

<script setup>
import vueFilePond from 'vue-filepond'
import 'filepond/dist/filepond.min.css'

const file = ''

</script>

It is very straightforward, it's basically sending the uploaded file to the server at the API endpoint to '/api/images' which is the API endpoint of my Laravel application and it works as expected.

However when I try to validate the request in the Laravel controller, I always get a 302 redirect reponse back in my Vue 3 application. This is how my validator looks like:

public function upload(Request $request)
{
    $request->validate(
        [
            'image' => 'required|image|dimensions:min_width=1,max_height=1|max:4000',
        ]
    );

    if ($request->fails())
    {
        dd('Request failed. App should stop here.');
    }
}

I deliberately set the "max_height" to 1 so the validatior fails, for testing. However the app doesn't go to "Request failed.." it just simply redirects (302) the user instead of returning the errors.

I am assuming that Laravel doesn't recognize this as an AJAX request for some reason. Because these request validations always work perfect if I do a simple Vue Axios form submit. I always get the errors in JSON format. But here it's not the case.

I have tried doing this and it was successfully giving me the "Validation fails message":

$validator = Validator::make($request->all(),
[
    'image' => 'required|image|dimensions:min_width=1,min_height=1|max:4000',
]);

if ($validator->fails())
{
    dd('Validator fails.');
}

However I would want to use a Form Request validation here (so I can put the contents of the validation logic into it's spearate file.)

What I want is: when the image validation fails -> Laravel should return a JSON response with all the errors. Just like when a form validation fails.

What am I missing though? Why isn't it working like it's supposed to in the first situation?

You are mostly just missing the header accept = application/json

That header is the only real difference between an ajax call and a normal request regardless of the route containing "api" or not.

Since the request expects a json response, the exception handler will not send a redirection, it will instead return a json of the error. albeit a validation exception error response or any exception error.