nuxt: Fetch and AsyncData not working on reloading page.

Error: Request failed with status code 404
    at createError (/home/deepak/Linux/NodeJS/FullStack/Notes/WebApp/node_modules/axios/lib/core/createError.js:16:15)
    at settle (/home/deepak/Linux/NodeJS/FullStack/Notes/WebApp/node_modules/axios/lib/core/settle.js:18:12)
    at IncomingMessage.handleStreamEnd (/home/deepak/Linux/NodeJS/FullStack/Notes/WebApp/node_modules/axios/lib/adapters/http.js:191:11)
    at emitNone (events.js:91:20)
    at IncomingMessage.emit (events.js:188:7)
    at endReadableNT (_stream_readable.js:975:12)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)

I am fetching data via ajax using axios. When I navigate to the page using a router link, it loads the data but if I reload the page then data disappears and the above error shows up on the backend. It is same for both methods ‘fetch’ & ‘asyncData’.

<div align="right">_{This question is available on Nuxt.js community (#c998)}</div>

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 15

Most upvoted comments

fetch and AsyncData only work on vue in pages directory

hilkbahar on Jul 21, 2017

so I still do not know how to solve this problem…

seymoe on Jul 3, 2018

Its my solution add like plugin. Don remember set variable like false in data()

import Vue from 'vue'
Vue.mixin({
    async beforeMount() {
        if( this.$root.$options.context.isStatic
            && typeof this.$root.$options.context.from == 'undefined'
            && this.$router.history.current.path != '/'
            && typeof this.$options.asyncData == "function") {

            const data = await this.$options.asyncData(this.$root.$options.context);

            for(let k in data) {
                this[k] = data[k];
            }
        }
    }
});

this mixin call asyncDate

prochorz on Jul 31, 2018