javascript - 为什么从 Vuejs 中使用 Laravel 8 的 AJAX POST 请求会抛出 405(不支持方法)错误？

Question

我正在尝试使用 axios 和 jquery 从 Vuejs 实例发出发布请求，但失败并显示错误 405(方法不允许)。当我使用默认提交提交表单时，一切正常。我用谷歌搜索了一整天，但没有得到任何帮助。以下是详细信息: 这是我在使用 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)

这是我在使用 jQuery ajax 方法发出请求时在控制台中得到的内容。

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

我的路线在Route/web.php

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

我的 Controller 方法:

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);
    }

我对 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);
                });

我对 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

您的路由路径以 /doRegister 而不是 /doRegister/ 结尾，但在 axios 请求中，您的 URL 为

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

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

下面是完整的 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);
      });