Vue js POST fails onclick login "Response for preflight has invalid HTTP status code 404"

Question

I'm Building a RESTfull API for a Vue app, i'm facing problem with authenticating user, i'm getting the below error

XMLHttpRequest cannot load http://localhost:8000/oauth/token/. Response for preflight has invalid HTTP status code 404

My Vue Code

<script>
export default {
  data () {
    return {
      email: '',
      password: '',
      error: ''
    }
  },
  methods: {
    login () {
      var data = {
        client_id: 2,
        client_secret: 'GWSpaP77kEIFXSG2XklctCc7AXAoWcEq4tPQbneF',
        grant_type: 'password',
        username: this.email,
        password: this.password
      }
      this.$http.post('http://localhost:8000/oauth/token/', data).then((response) => {
        console.log(response)
      }, (response) => {
        this.error = 'No response'
      })
/*      this.$http.get('http://localhost:8000/api/test').then((response) => {
        console.log(response)
      }, (response) => {
        this.error = 'No response'
      }) */
    }
  }
}
</script>

And The Route:list in laravel is

+--------+----------+---------------------------------------------+------+---------------------------------------------------------------------------+---------------+
| Domain | Method   | URI                                         | Name | Action                                                                    | Middleware    |
+--------+----------+---------------------------------------------+------+---------------------------------------------------------------------------+---------------+
|        | GET|HEAD | /                                           |      | Closure                                                                   | web           |
|        | GET|HEAD | api/oauth/authorize                         |      | Laravel\Passport\Http\Controllers\AuthorizationController@authorize       | cors,web,auth |
|        | DELETE   | api/oauth/authorize                         |      | Laravel\Passport\Http\Controllers\DenyAuthorizationController@deny        | cors,web,auth |
|        | POST     | api/oauth/authorize                         |      | Laravel\Passport\Http\Controllers\ApproveAuthorizationController@approve  | cors,web,auth |
|        | GET|HEAD | api/oauth/clients                           |      | Laravel\Passport\Http\Controllers\ClientController@forUser                | cors,web,auth |
|        | POST     | api/oauth/clients                           |      | Laravel\Passport\Http\Controllers\ClientController@store                  | cors,web,auth |
|        | DELETE   | api/oauth/clients/{client_id}               |      | Laravel\Passport\Http\Controllers\ClientController@destroy                | cors,web,auth |
|        | PUT      | api/oauth/clients/{client_id}               |      | Laravel\Passport\Http\Controllers\ClientController@update                 | cors,web,auth |
|        | POST     | api/oauth/personal-access-tokens            |      | Laravel\Passport\Http\Controllers\PersonalAccessTokenController@store     | cors,web,auth |
|        | GET|HEAD | api/oauth/personal-access-tokens            |      | Laravel\Passport\Http\Controllers\PersonalAccessTokenController@forUser   | cors,web,auth |
|        | DELETE   | api/oauth/personal-access-tokens/{token_id} |      | Laravel\Passport\Http\Controllers\PersonalAccessTokenController@destroy   | cors,web,auth |
|        | GET|HEAD | api/oauth/scopes                            |      | Laravel\Passport\Http\Controllers\ScopeController@all                     | cors,web,auth |
|        | POST     | api/oauth/token                             |      | Laravel\Passport\Http\Controllers\AccessTokenController@issueToken        | cors,throttle |
|        | POST     | api/oauth/token/refresh                     |      | Laravel\Passport\Http\Controllers\TransientTokenController@refresh        | cors,web,auth |
|        | GET|HEAD | api/oauth/tokens                            |      | Laravel\Passport\Http\Controllers\AuthorizedAccessTokenController@forUser | cors,web,auth |
|        | DELETE   | api/oauth/tokens/{token_id}                 |      | Laravel\Passport\Http\Controllers\AuthorizedAccessTokenController@destroy | cors,web,auth |
|        | GET|HEAD | api/test                                    |      | Closure                                                                   | api           |
|        | GET|HEAD | api/user                                    |      | Closure                                                                   | api,auth:api  |
+--------+----------+---------------------------------------------+------+---------------------------------------------------------------------------+---------------+

I have tried many ways i'm not getting solution for this.

Answer 1

Your url in vue is: this.$http.post('http://localhost:8000/oauth/token/...

But your routes are prefixed with /api:

this.$http.post('http://localhost:8000/api/oauth/token/...