I was following along this tutorial on youtube 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.
Error message
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
---> <Register> at src/components/Register.vue
<App> at src/App.vue
<Root>
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"
Directory structure (only relevant parts)
├── client
│ └── src
│ ├── components
│ │ ├── HelloWorld.vue
│ │ └── Register.vue
│ ├── router
│ │ └── index.js
│ └── services
│ ├── Api.js
│ └── AuthenticationService.js
└── server
└── src
└── app.js
client/src/components/Register.vue
<template>
<div>
<h1>Register</h1>
<input
type="email"
name="email"
v-model="email"
placeholder="email">
<input
type="password"
name="password"
v-model="password"
placeholder="Password">
<button
@click="register">Register
</button>
</div>
</template>
<script>
import AuthenticationService from '@/services/AuthenticationService'
export default {
data () {
return {
email: '',
password: ''
}
},
methods: {
async register () {
await AuthenticationService.register({
email: this.email,
password: this.password
})
}
}
}
</script>
client/src/services/AuthenticationService.js
import Api from '@/services/Api'
export default {
register (credentials) {
return Api()
.post('register')
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error.response)
})
}
}
client/src/services/Api.js
import axios from 'axios'
export default () => {
return axios.create({
baseUrl: `http://localhost:8081/`
})
}
client/src/router/index.js
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
}
]
})
server/src/app.js
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) => {
res.send({
message: `Hello Your user was registered. Have fun!`
})
})
app.listen(process.env.PORT || 8081);
Now, I've already looked into this and this. 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.
