0

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?

4
  • Are you using asyncData or fetch?
    – bar5um
    Commented Oct 11, 2023 at 6:14
  • @bar5um I am using fetch Commented Oct 11, 2023 at 7:42
  • Not sure if this helps but can you make sure that it is async fetch and also use await operator before your axios request like: return await this.$axios .... and see if it still gives error?
    – bar5um
    Commented Oct 11, 2023 at 10:57
  • @bar5um Yes, I am already using async fetch. Right now I am using await where I am calling the function in which axios is called. But will try to put await before axios instead of the enclosing function and check if it makes any difference. Commented Oct 11, 2023 at 11:22

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.