In my Nuxtjs application, I am facing issue "Cannot set headers after they are sent to the client" when API request is made using axios. I am using axios from nuxt: @nuxtjs/axios. The issue is occurring on both production server and in my local server when I create build production using "NODE_ENV=production nuxt build --modern=server". In development build it works fine.
Staging build is also working fine with the same code.
The issue is occurring only for 3 specific pages. On other pages, it works normally and returns the response from API. I can confirm that there is no issue on API side because the call is not even made to API server. It just throws this error and never send the request to API server.
In SSR mode, the page will open only once. After that it starts throwing this error. After that, if I restart the server, again it will work only once.
While trying different things, one of the thing I tried was to add official axios library instead of one provided by nuxt. For testing purpose, I hard coded auth. token. Surprisingly, it did not throw any error when I used axios this way.
Below is the code and error it throws:
return this.$axios[method](url, data, config).then(function({
status,
data
}) {
if (status > 199 && status < 300) {
return data;
}
return Promise.reject(
new Error(res.data.error || "Api request failed", res.status)
);
});
The error:
Cannot set headers after they are sent to the client 17:12:36
at new NodeError (internal/errors.js:322:7)
at ServerResponse.setHeader (_http_outgoing.js:561:11)
at runtime_Storage.setCookie (server.js:26823:20)
at runtime_Storage.setUniversal (server.js:26684:10)
at runtime_Storage.syncUniversal (server.js:26711:12)
at runtime_Token._syncToken (server.js:27418:26)
at runtime_Token.sync (server.js:27370:24)
at LocalScheme.check (server.js:27477:30)
at server.js:27306:23
The same thing works perfectly fine when the application is loaded completely and navigating through it(in SPA mode). But if I try to open link directly(SSR mode) this issue occurs.
Has anyone faced this issue or guide me what to do about this?
asyncData
orfetch
?async fetch
and also useawait
operator before your axios request like:return await this.$axios ....
and see if it still gives error?