Network Error when click <nuxt-link/> in NUXT? - vue.js

Question

Network error when click <nuxt-link/>,
this is my error details, but when i refresh the link, everything is good ? why ?
this is my entire code ,...
<template>
<div>
<nuxt-child/>
<h1>Videos</h1>
<div v-for="video in $store.state.videos" :key="video.id">
<nuxt-link :to="`/videos/${video.id}`">{{ video.customerName }}</nuxt-link>
</div>
</div>
</template>
<script>
export default {
head:{
title: 'Customer List'
},
async fetch({$axios, store}) {
let response = await $axios.get('/customers');
let videos = response.data;
store.commit('SET_VIDEOS', videos);
},
}
</script>
<style lang="scss" scoped>
</style>````

Answer 1

Your API request is cross-origin as localhost:3000 differs from localhost:8000
Your API needs to respond to the request on /api/customers with a header of Access-Control-Allow-Origin: *. This enables the API to be called from any origin page. Ideally in the future you would want to replace this "wildcard" * with the actual origin but for testing this is fine.
I assume your API is an Express one, in this case adding this to your application would force all requests to utilise a wildcard CORS:
// Set middlware
app.use(function (req, res, next) {
// URL of website to allow or a wildcard
res.setHeader('Access-Control-Allow-Origin', '*');
// Continue to next layer of request/middleware
next();
});
Alternatively you could also set the origin to http://localhost:8000
As a side note, in your example code I see you are using the Vuex store and have a method to make the API call before committing to the store.
If you ever plan on repeating this API call on another component, it would be advised to turn your function into an action within the Vuex store so it is in one central, reusable place.