bugfix> javascript > 投稿

axiosとjqueryの両方でVuejsインスタンスからPOSTリクエストを作成しようとしていますが、エラー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)

これは、jQueryajaxメソッドを使用してリクエストを行ったときにコンソールに表示されるものです。

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

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

あなたの答え