Laravel 5.4 cannot get Post method from vue.js

I'm trying to make an user authentication using laravel as back-end and vue.js as front-end, and it happens that after adding the cors middleware, laravel still doesn't get the post requests from vue.js (it works for get requests).

I'm using passport for the authentication and on the console I get a 404 error... I implemented vue.resource, cors, and passport (since I have the tables generated on the database by it and the new routes that passport implements) as it should be done, yet if there is some code that I did not upload in here that might help to get the solution to this problem, please feel free to ask.

Here is the code of the vue components...

Main.js:

import Vue from 'vue'
import App from './App.vue'
import Router from './routes.js'

import VueResource from 'vue-resource'

Vue.use(VueResource)

new Vue({
    el: '#app',
    render: h => h(App),
    router: Router
})

App.vue:

<template>
  <div class="container" id="app">
    <bar></bar>
    <router-view></router-view>
  </div>
</template>

<script>
  import bar from './components/bar.vue'
  var App = {
      csrfToken: ""
  }
  export default {
    components: {
      'bar': bar,
    }
  }
</script>

<style>

...

</style>

login.vue (Here is the post method):

<template>
    <div class="container">

  <div class="row" id="pwd-container">
    <div class="col-md-4"></div>

    <div class="col-md-4">

      <section class="login-form">

        <form method="post" action=# role="login">
          <input v-model="email" type="email" name="email" placeholder="Email" required class="form-control input-lg" value="joestudent@gmail.com" />

          <input v-model="password" type="password" class="form-control input-lg" id="password" placeholder="Password" required="" />


          <div class="pwstrength_viewport_progress"></div>

          <!--type="submit"-->
          <button @click="login" type="submit" name="go" class="btn btn-lg btn-primary btn-block">Sign in</button>
          <div>
            <a href="#">Create account</a> or <a href="#">reset password</a>
          </div>

        </form>

        <div class="form-links">
          <a href="#">http://ift.tt/1AXr3ha;
        </div>
      </section>  
      </div>

      <div class="col-md-4"></div>


  </div>
</div>
</template>

<script>


    export default {
        data(){
            return {
                email: '',
                password: ''
            }
        },
        methods: {
            login(){
                var data = {
                    grant_type: 'password',
                    client_id: 2,
                    client_secret: '1NB8ybcjuc1nOp70uwhJ7KygaK0AdsUHzroQuH7M',
                    username: this.email,
                    password: this.password,
                    scope: ''
                }

                this.$http.post('http://localhost:8000/oauth/token', data)
                    .then(response =>{
                        console.log(response.data)
                    })
                    .catch(response =>{
                       // Error array
                    })


            }
        }
    }

</script>

<style>

</style>

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2qywUxZ
via IFTTT