I am a beginner. I have a Lumen API. The project runs on http://localhost:8000/. In Postman the API is working fine. Now I want to call the API from a NuxtJs project using Axios. My NuxtJs project is running on http://localhost:3000/.
<template>
<div>
CV List
<v-row v-for="(applicant, i) in applicants" :key="i">
<v-col>
<h1>name: {{ applicant.name }}</h1>
<p>{{ applicant.email }}</p>
</v-col>
</v-row>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
async fetch({ store, error }) {
try {
await store.dispatch('applicants/fetchApplicants')
} catch (e) {
error({
statusCode: 503,
message: 'Unable to fetch applicants at this time. Please try again.',
})
}
},
computed: mapState({
applicants: (state) => state.applicants.applicants,
}),
}
</script>
my applicants.js file like this:
import CVService from '@/services/CVService.js'
export const state = () => ({
applicants: [],
applicant: {},
})
export const mutations = {
SET_APPLICANTS(state, applicants) {
state.applicants = applicants
},
}
export const actions = {
fetchApplicants({ commit }) {
return CVService.getApplicants().then((response) => {
commit('SET_APPLICANTS', response.data)
})
},
}
CVService is like this,
import axios from 'axios'
const apiClient = axios.create({
baseURL: `http://localhost:8000`,
withCredentials: false,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
})
export default {
getApplicants() {
return apiClient.get('/api/authors')
},
}
The console is showing error, 503 (Service unavailable). What causing is the problem?