title: Vue: Error in v-on handler (Promise/async): "Error: Request failed with status code 404"
body: <p>I was following along <a href="https://youtu.be/Fa4cRMaTDUI?t=3262" rel="nofollow noreferrer">this tutorial on youtube</a> when I got the following error (I already left a comment there, hoping somebody got the same issue or knows how to solve it). Basically, in this part of the tutorial Cody shows how to build a register form with express and vue. The error occurs when I click the register button.</p>
  
  <p><strong>Error message</strong></p>
  
  <pre><code>POST http://localhost:8080/register 404 (Not Found)
  [Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404"
  found in
  
  ---&gt; &lt;Register&gt; at src/components/Register.vue
         &lt;App&gt; at src/App.vue
           &lt;Root&gt;
  vue.esm.js?efeb:1897 Error: Request failed with status code 404
      at createError (createError.js?16d0:16)
      at settle (settle.js?db52:17)
      at XMLHttpRequest.handleLoad (xhr.js?ec6c:59)
  [Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404"
  </code></pre>
  
  <p><strong>Directory structure</strong> (only relevant parts)</p>
  
  <pre><code>├── client
  │   └── src
  │   ├── components
  │   │   ├── HelloWorld.vue
  │   │   └── Register.vue
  │   ├── router
  │   │   └── index.js
  │   └── services
  │       ├── Api.js
  │       └── AuthenticationService.js
  └── server
      └── src
      └── app.js
  </code></pre>
  
  <p><strong>client/src/components/Register.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Register&lt;/h1&gt;
      &lt;input
        type="email"
        name="email"
        v-model="email"
        placeholder="email"&gt;
      &lt;input
        type="password"
        name="password"
        v-model="password"
        placeholder="Password"&gt;
      &lt;button
        @click="register"&gt;Register
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import AuthenticationService from '@/services/AuthenticationService'
  export default {
    data () {
      return {
        email: '',
        password: ''
      }
    },
    methods: {
      async register () {
        await AuthenticationService.register({
          email: this.email,
          password: this.password
        })
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>client/src/services/AuthenticationService.js</strong></p>
  
  <pre><code>import Api from '@/services/Api'
  
  export default {
    register (credentials) {
      return Api()
        .post('register')
        .then(response =&gt; {
          console.log(response)
        })
        .catch(error =&gt; {
          console.log(error.response)
        })
    }
  }
  </code></pre>
  
  <p><strong>client/src/services/Api.js</strong></p>
  
  <pre><code>import axios from 'axios'
  
  export default () =&gt; {
    return axios.create({
      baseUrl: `http://localhost:8081/`
    })
  }
  </code></pre>
  
  <p><strong>client/src/router/index.js</strong></p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  import HelloWorld from '@/components/HelloWorld'
  import Register from '@/components/Register'
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
      },
      {
        path: '/register',
        name: 'register',
        component: Register
      }
    ]
  })
  </code></pre>
  
  <p><strong>server/src/app.js</strong></p>
  
  <pre><code>const express = require('express');
  const bodyParser = require('body-parser');
  const cors = require('cors');
  const morgan = require('morgan');
  
  const app = express();
  app.use(morgan("combine"));
  app.use(bodyParser.json());
  app.use(cors());
  
  app.post("/register", (req, res) =&gt; {
    res.send({
      message: `Hello Your user was registered. Have fun!`
    })
  })
  
  app.listen(process.env.PORT || 8081);
  </code></pre>
  
  <p>Now, I've already looked into <a href="https://stackoverflow.com/questions/48179456/vue-unhandled-promise-rejection-error-request-failed-with-status-code-404">this</a> and <a href="https://github.com/axios/axios/issues/960" rel="nofollow noreferrer">this</a>. But I can't figure out the problem. I would be grateful for any hints. BTW I hope the style of this question is ok.</p>