The server responded with a status of 400 () Laravel and Vue js? - json

Question

This is very strange, I'm building an SPA with Laravel and Vue js. I'm using Laravel Passport and JWT for Authentication. All of a sudden my Validation errors aren't displaying when I submit any of my forms. I keep getting this error:
Failed to load resource: the server responded with a status of 400 ()
If you fill in the Forms and click submit everything still works in the application, I see the success message and the data gets saved in the database. I have no idea what is causing this, at first I thought it had to do with the Recaptcha code that I implemented but now, I'm not 100% sure that that's the problem, since I removed all of the related code and tried to submit my forms again and still got a 400 error.
I know these details are pretty vague, but if anyone has idea what this could be related to it would be greatly appreciated.
Thank you.

Answer 1

You need to return a JSON error handle if you are using an API call.
The Laravel default error handling for validation is to throw Exception thru the blade that you can access as $errors
If you want to make your own validation use the validator facade.
use Illuminate\Support\Facades\Validator;
use Illuminate\Http\Request;
public function store(Request $request) {
$validation = Validator::make($request->all(), [
'name' => 'required',
'email' => 'required',
'password' => 'required',
]);
if($validation->fails()) {
return response()->json([
'status' => 'failed',
'message' => $validation->errors(),
], 400);
}
}

Answer 2

Thank you to those who commented or answered. I did actually figure it out. I added a couple of functions into my Exceptions/Handler.php file. I built this SPA based off of a Free Youtube Course and I grabbed the code that I placed in the Handler.php file after following a different paid course on Udemy. I didn't think these functions would cause any harm but they did. After removing them, everything is working great and back to normal. Thank you.