• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

Vue: Error in v-on handler (Promise/async): “Error: Request failed with status code 404”

Vue cps12345 8个月前 (08-25) 1485次浏览 0个评论
<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);

报错

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"

解决

问题在这里:

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

请注意,错误消息指的是http://localhost:8080/register,使用port 8080而不是8081,表示这baseUrl不起作用。

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

 

喜欢 (11)

您必须 登录 才能发表评论!