为啥来自 Vuejs 的 Laravel 8 的 AJAX POST 请求会引发 405（不支持的方法）错误？

Posted 2023-02-22

【中文标题】为啥来自 Vuejs 的 Laravel 8 的 AJAX POST 请求会引发 405（不支持的方法）错误？

【英文标题】：Why is AJAX POST request with Laravel 8 from within Vuejs is throwing 405 (Method Not Supported) error?为什么来自 Vuejs 的 Laravel 8 的 AJAX POST 请求会引发 405（不支持的方法）错误？

【发布时间】：2021-04-03 11:05:43

【问题描述】：

我正在尝试使用 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']);

我的控制器方法：

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

【问题讨论】：

你能把axios url最后的“/”去掉，试试axios.post(config.siteUrl+"/doRegister")....

@Ashu 非常感谢。删除“/”有效。你能把你的评论作为这个问题的答案吗？很有帮助。再次感谢

【参考方案1】：

您的 Route 路径以 /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);
      );