Vue：v-on 处理程序中的错误（Promise/async）：“错误：请求失败，状态码 404”

Question

当我收到以下错误时，我正在关注this tutorial on youtube（我已经在那里留下了评论，希望有人遇到同样的问题或知道如何解决它）。基本上，在教程的这一部分中，Cody 展示了如何使用 express 和 vue 构建注册表单。单击注册按钮时出现错误。

错误信息

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"

目录结构（仅相关部分）

├── 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);

现在，我已经查看了 this 和 this。但我无法弄清楚问题所在。我将不胜感激任何提示。顺便说一句，我希望这个问题的风格还可以。

Answer 1

我相信问题出在这里：

baseUrl: `http://localhost:8081/`

请注意，错误消息指的是http://localhost:8080/register，使用端口8080 而不是8081，暗示baseUrl 不起作用。

axios 文档https://github.com/axios/axios#request-config 建议将此设置称为baseURL，而不是baseUrl。