未捕获(承诺)错误:请求失败,状态码为 405 VUEJS

时间:2021-03-21 15:19:35

标签: laravel api vue.js axios

所以我试图通过 vue.js 使用 api 表单 laravel 这是我调用 axios.post 时的登录页面:

<template>
    <main>
        <section class="login-content">
            <div class="container h-100">
                <div
                    class="row align-items-center justify-content-center h-100"
                >
                    <div class="col-12">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <h2 class="mb-2">Sign In</h2>
                                <p>
                                    To Keep connected with us please login with
                                    your personal info.
                                </p>
                                <form>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div
                                                class="floating-label form-group"
                                            >
                                                <input
                                                    class="floating-input form-control"
                                                    type="email"
                                                    v-model="data.email"
                                                    placeholder=" "
                                                />
                                                <label>Email</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div
                                                class="floating-label form-group"
                                            >
                                                <input
                                                    class="floating-input form-control"
                                                    type="password"
                                                    v-model="data.password"
                                                    placeholder=" "
                                                />
                                                <label>Password</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div
                                                class="custom-control custom-checkbox mb-3"
                                            >
                                                <input
                                                    type="checkbox"
                                                    class="custom-control-input"
                                                    id="customCheck1"
                                                />
                                                <label
                                                    class="custom-control-label"
                                                    for="customCheck1"
                                                    >Remember Me</label
                                                >
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <a
                                                href="auth-recoverpw.html"
                                                class="text-primary float-right"
                                                >Forgot Password?</a
                                            >
                                        </div>
                                    </div>
                                    <button
                                        type="sumbit"
                                        class="btn btn-primary"
                                        @click="login" :disabled="isLogging" :loading="isLogging"
                                    >
                                        Sign In
                                    </button>
                                    <p class="mt-3">
                                        Create an Account
                                        <router-link to="/" exact
                                            >Sign Up</router-link
                                        >
                                    </p>
                                </form>
                            </div>
                            <div class="col-lg-6 mb-lg-0 mb-4 mt-lg-0 mt-4">
                                <img
                                    src=" asset (html/assets/images/login/01.png)"
                                    class="img-fluid w-80"
                                    alt=""
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</template>

<script>
export default {
    data() {
        return {
            data: {
                email: "",
                password: ""
            },
            isLogging: false
        };
    },
    methods: {
        async login() {
            if (this.data.email == "") return alert("Email is required")
            if (this.data.password == "") return alert("Password is required")
            /* if(this.data.password.length<6) return this.e ('Incorrect') */
            this.isLogging = true
            const axios = require('axios')
            const headers = {
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Method": "POST",
                "Content-Type": "application/json",
            }
            
            axios.post('http://127.0.0.1:8000/?#/login/',{
                email: this.email, password: this.password
            }, headers)
            .then((response)=>{
                const data=response.data;
                console.log(data);
            })
            
            this.isLogging = false
        }
    },
    mounted() {
        console.log("Component mounted."); 
    }
};
</script>

确认步骤:电子邮件和密码工作正常
但我按下按钮时出现错误
这是您可以看到的登录页面:this is the login page as u can see 我正在关注这个教程,但像往常一样,我有错误,不像教程中的那个人this is the link of the tuto 这是路线:

Route::post('login', 'App\Http\Controllers\Api\AuthController@login');

0 个答案:

没有答案