Im trying to get data from my API backend (express.js) to my Vue client but every time i got "status failed or canceled", i haven't any error on my console except this :
That my backend code route.js
:
const express = require('express')
const router = express.Router()
const { ensureAuth, ensureGuest } = require('../middleware/auth')
const bodyParser = require("body-parser");
const User = require('../models/User')
const cors = require("cors");
const app = express();
app.use(bodyParser.urlencoded({ extended: true }))
// use cors options
app.use(cors(corsOptions))
app.use(express.json())
router.get('/', ensureGuest, (req, res) => {
res.render('visual')
})
router.get('/userInfo', ensureAuth, async (req, res) => res.json({displayName : 'John Doe'}))
My Vue script dashboard.vue
:
<template>
<img src="@/assets/images/avatars/0.jpg" alt="User Avatar"> <span>{{info.displayName}}</span>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
info: null,
};
},
created() {
axios.get('http://localhost:3000/userInfo')
.then(res => {
this.info = res.data;
})
},
};
</script>