Vue: ошибка в обработчике v-on (Promise / async): «Ошибка: запрос не выполнен с кодом состояния 404» - PullRequest
Новая
       38

Vue: ошибка в обработчике v-on (Promise / async): «Ошибка: запрос не выполнен с кодом состояния 404»

0 голосов
/ 30 июня 2019

Я читал этот урок на youtube , когда я получил следующую ошибку (я уже оставил там комментарий, надеясь, что кто-то получил такую ​​же проблему или знает, как ее решить). По сути, в этой части урока Коди показывает, как построить форму регистра с помощью 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

клиент / SRC / компоненты / 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>

клиент / SRC / услуги / 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)
      })
  }
}

клиент / SRC / услуги / Api.js 

import axios from 'axios'

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

клиент / SRC / маршрутизатор / 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
    }
  ]
})

Сервер / 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);

Теперь я уже изучил это и это . Но я не могу понять проблему. Буду благодарен за любые подсказки. Кстати, я надеюсь, что стиль этого вопроса в порядке.

1 Ответ

1 голос
/ 30 июня 2019

Я считаю, что проблема здесь: 

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

Обратите внимание, что сообщение об ошибке относится к http://localhost:8080/register, используя порт 8080 вместо 8081, подразумевая, что baseUrl не работает.

В документации Axios https://github.com/axios/axios#request-config, предполагается, что этот параметр называется baseURL, а не baseUrl.

...