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

Question

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

\n\n

错误信息

\n\n

POST http://localhost:8080/register 404 (Not Found)\n[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404"\nfound in\n\n---> <Register> at src/components/Register.vue\n       <App> at src/App.vue\n         <Root>\nvue.esm.js?efeb:1897 Error: Request failed with status code 404\n    at createError (createError.js?16d0:16)\n    at settle (settle.js?db52:17)\n    at XMLHttpRequest.handleLoad (xhr.js?ec6c:59)\n[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404"\n

\n\n

目录结构（仅相关部分）

\n\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 client\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 HelloWorld.vue\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Register.vue\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 router\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 services\n\xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Api.js\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 AuthenticationService.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 server\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 app.js\n

\n\n

客户端/src/组件/Register.vue

\n\n

<template>\n  <div>\n    <h1>Register</h1>\n    <input\n      type="email"\n      name="email"\n      v-model="email"\n      placeholder="email">\n    <input\n      type="password"\n      name="password"\n      v-model="password"\n      placeholder="Password">\n    <button\n      @click="register">Register\n    </button>\n  </div>\n</template>\n\n<script>\nimport AuthenticationService from \'@/services/AuthenticationService\'\nexport default {\n  data () {\n    return {\n      email: \'\',\n      password: \'\'\n    }\n  },\n  methods: {\n    async register () {\n      await AuthenticationService.register({\n        email: this.email,\n        password: this.password\n      })\n    }\n  }\n}\n</script>\n

\n\n

客户端/src/services/AuthenticationService.js

\n\n

import Api from \'@/services/Api\'\n\nexport default {\n  register (credentials) {\n    return Api()\n      .post(\'register\')\n      .then(response => {\n        console.log(response)\n      })\n      .catch(error => {\n        console.log(error.response)\n      })\n  }\n}\n

\n\n

客户端/src/services/Api.js

\n\n

import axios from \'axios\'\n\nexport default () => {\n  return axios.create({\n    baseUrl: `http://localhost:8081/`\n  })\n}\n

\n\n

客户端/src/路由器/index.js

\n\n

import Vue from \'vue\'\nimport Router from \'vue-router\'\nimport HelloWorld from \'@/components/HelloWorld\'\nimport Register from \'@/components/Register\'\n\nVue.use(Router)\n\nexport default new Router({\n  routes: [\n    {\n      path: \'/\',\n      name: \'HelloWorld\',\n      component: HelloWorld\n    },\n    {\n      path: \'/register\',\n      name: \'register\',\n      component: Register\n    }\n  ]\n})\n

\n\n

服务器/src/app.js

\n\n

const express = require(\'express\');\nconst bodyParser = require(\'body-parser\');\nconst cors = require(\'cors\');\nconst morgan = require(\'morgan\');\n\nconst app = express();\napp.use(morgan("combine"));\napp.use(bodyParser.json());\napp.use(cors());\n\napp.post("/register", (req, res) => {\n  res.send({\n    message: `Hello Your user was registered. Have fun!`\n  })\n})\n\napp.listen(process.env.PORT || 8081);\n

\n\n

现在，我已经研究过这个和这个了。但我无法找出问题所在。如果有任何提示，我将不胜感激。顺便说一句，我希望这个问题的风格没问题。

\n

Answer 1

我相信问题就在这里：

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

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

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