Why is AJAX POST request with Laravel 8 from within Vuejs is throwing 405 (Method Not Supported) error?

Question

I am trying to make a post request from with Vuejs instance both with axios and jquery but it fails with error 405 (method not allowed). When I submit the form using default submission everything works fine. I google it for the whole day but didn't get any help. Here are the details: This is what I get in console when I make the request with axios:

axios.min.js:2 GET http://localhost/Babar/unishared.it/public/doRegister 405 (Method Not Allowed)
(anonymous) @ axios.min.js:2
e.exports @ axios.min.js:2
e.exports @ axios.min.js:2
Promise.then (async)
r.request @ axios.min.js:2
r.<computed> @ axios.min.js:2
(anonymous) @ axios.min.js:2
submitRegister @ register-login.js:78
submit @ VM4754:3
invokeWithErrorHandling @ vue-dev.js:1863
invoker @ vue-dev.js:2188
original._wrapper @ vue-dev.js:7547
register-login.js:110 Error: Request failed with status code 405
    at e.exports (axios.min.js:2)
    at e.exports (axios.min.js:2)
    at XMLHttpRequest.l.onreadystatechange (axios.min.js:2)

This what I get in console when I make the request with jQuery ajax method.

GET http://localhost/Babar/unishared.it/public/doRegister 405 (Method Not Allowed)

My route in Route/web.php

Route::post('/doRegister', [RegisterController::class,'doRegister']);

My controller method:

public function doRegister(Request $request) {
        
        $validatedData = $request->validate([
            'email' => ['required','regex:/^.+@.*stu.*$|^.+@.*uni.*$/i', 'unique:App\Models\User,email', 'max:255'],
            'fname' => ['required'],
            'lname' => ['required'],
            'password' => ['required','confirmed'],
            'password_confirmation' => ['required'],
            'uni' => ['required'],
            'type' => ['required'],
            'degree' => ['required'],
            'enrolment' => ['required'],
            'year' => ['required'],
        ]);
        $user = new User;
        $user->fname = $request->input('fname');
        $user->lname = $request->input('lname');
        $user->email = $request->input('email');
        $user->password = Hash::make($request->input('password'));
        $user->uni = $request->input('uni');
        $user->degree = $request->input('degree');
        $user->enrolment = $request->input('enrolment');
        $user->year = $request->input('year');
        if($user->save())
        {
            event(new Registered($user));
            $data = ['status' => 'success'];
        }
        else
        {
            $data = ['status' => 'failure'];
        }
        
        return response()->json($data,200);
    }

My request with axios:

axios.post(config.siteUrl+"/doRegister/",
                    {
                        _token:config.csrfToken,
                        email:this.email,
                        lname:this.lName,
                        fname:this.fName,
                        password:this.password,
                        password_confirmation:this.confirmPassword,
                        uni:this.uni,
                        type:this.type,
                        degree:this.degree,
                        enrolment:this.enrolment,
                        year:this.year,
                    }
                )
                .then((response) => {
                    
                    if(response.data.status == "success")
                    {                            
                        this.msgs.successMsg = true;
                        form.reset();
                        
                    }
                    else if(response.data.status == "failure")
                    {
                       this.msgs.failureMsg = true;
                    }
                    this.spinners.registerSpinner = false;
                    
                  console.log(response.data.status);
                }, (error) => {
                  console.log(error);
                });

My request with jQuery:

 $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': config.csrfToken
                    }
                });
            $.ajax({
                /* the route pointing to the post function */
                url: config.siteUrl+"/doRegister/",
                type: 'POST',
                /* send the csrf-token and the input to the controller */
                data: {

                    email:me.email,
                    lname:me.lName,
                    fname:me.fName,
                    password:me.password,
                    password_confirmation:me.confirmPassword,
                    uni:me.uni,
                    type:me.type,
                    degree:me.degree,
                    enrolment:me.enrolment,
                    year:me.year,},
                dataType: 'JSON',

                success: function (data) { 
                    console.log(data);
                }
            });

Answer 1

Your Route path ends with /doRegister and not /doRegister/ but in the axios request you have the URL as

axios.post(config.siteUrl+"/doRegister/", .... );

which should be axios.post(config.siteUrl+"/doRegister", .... );

Given below is the full axios request

 axios.post(config.siteUrl + "/doRegister", {
        _token: config.csrfToken,
        email: this.email,
        lname: this.lName,
        fname: this.fName,
        password: this.password,
        password_confirmation: this.confirmPassword,
        uni: this.uni,
        type: this.type,
        degree: this.degree,
        enrolment: this.enrolment,
        year: this.year,
      })
      .then((response) => {

        if (response.data.status == "success") {
          this.msgs.successMsg = true;
          form.reset();

        } else if (response.data.status == "failure") {
          this.msgs.failureMsg = true;
        }
        this.spinners.registerSpinner = false;

        console.log(response.data.status);
      }, (error) => {
        console.log(error);
      });