How to fix 405 (Method Not Allowed) using vue js and laravel

Question

Hi developers I have currently problem this project is an old project where the developer created. right now, we need to adjust some of there functionality. Right now I already extract the files to my localhost folder and now work without error on run watch and artisan serve. So the problem here is on login on the console it shows that http://localhost:8000/project/oauth/token 405 (Method Not Allowed), I really don't understand why this shows on the localhost however on the live server it works.

This project created using Vue Js and Laravel for the backend. I will show you guys the authentication function.

Login Function:

authenticate(){
            this.login_alert = false
            this.$validator.validateAll().then((result)=>{
                if(result){
                    const self = this;
                    
                    const authUser = {}
                    try{
                        const data = {
                            username: this.email,
                            password: this.password,
                            remember: this.remember_me,
                            client_id: '2',
                            client_secret: 'secret',
                            grant_type : 'password',
                            scope : ''
                        }
                        this.$store.dispatch('AUTH_REQUEST',data)
                            .then(response=>{
                                console.log(data);
                                authUser.access_token = response.access_token
                                authUser.refresh_token = response.refresh_token
                                authUser.expires_in = response.expires_in
                                window.localStorage.setItem('project_token',JSON.stringify(authUser))

                                /*LOGIN*/
                                this.login_alert = false
                                this.loading = false

                                window.location.reload()
                            })
                            .catch(error=>{
                                this.login_alert = true
                                window.localStorage.removeItem('project_token')
                                this.loading = false
                            })
                    }catch(err){
                        console.log(err);
                    }
                }
            })
        
        }

For the AUTH REQUEST:

AUTH_REQUEST:({commit,dispatch},obj)=>{
    return new Promise((resolve,reject) => {
        axios({
                url: '/project/oauth/token',
                data: obj,
                method:'post',
                config:'JSON'
            })
            .then(response=>{
                if(response.status == 200){
                    resolve(response.data);
                }
            })
            .catch(error=>{
                reject(error);
                localStorage.removeItem('project_token');
                commit('AUTH_ERROR',error);
            })
    
    })
},

Hope some one experience this. thanks.

Answer 1

In my case, the compilation of the route should be specified properly, for example

async purchaseDelete(purchase) {
        Csrf.getCookie();
        return Api.delete('/api/purchase_settings/${purchase.id}');
    },

the single tick on the axios delete method didnt represent correctly

async purchaseDelete(purchase) {
    Csrf.getCookie();
    return Api.delete(`/api/purchase_settings/${purchase.id}`);
}

When changed to back ticks, it responded with the correct result