NuxtJs API request with Axios locally to Lumen API

111 Views Asked by At

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?

0

There are 0 best solutions below