Question

当我遇到以下错误时，我一直沿this tutorial on youtube跟踪（我已经在此处留下了评论，希望有人遇到相同的问题或知道如何解决）。基本上，在本教程的这一部分中，Cody显示了如何使用express和vue构建注册表。单击注册按钮时发生错误。

错误消息

const <$> (pure 1 :: IO Int) <*> undefined
*** Exception: Prelude.undefined

目录结构（仅相关部分）

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 / Register.vue

├── client
│   └── src
│   ├── components
│   │   ├── HelloWorld.vue
│   │   └── Register.vue
│   ├── router
│   │   └── index.js
│   └── services
│       ├── Api.js
│       └── AuthenticationService.js
└── server
    └── src
    └── app.js

client / src / services / AuthenticationService.js

<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 / Api.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 / router / index.js

import axios from 'axios'

export default () => {
  return axios.create({
    baseUrl: `http://localhost:8081/`
  })
}

server / src / app.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
    }
  ]
})

现在，我已经研究过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。

Vue：v-on处理程序中的错误（承诺/异步）：“错误：请求失败，状态码为404”

1 个答案: