Nuxt.Js axios not using baseURL despite it being set correctly

Question

I want to call an API in asyncData()

  async asyncData({ $axios, params, store }) {
    let itemUUID = params.item;
    let item = await $axios.get("/item/" + itemUUID);
    return {item};
  }

Problem: Axios is still making the request on http://localhost:3000 if I do a console.log($axios.defaults.baseURL) the correct baseURL of my API is printed. This also works if I use my store action & make the call by using this.$axios

I am using @nuxtjs/axios 5.13.1 with Nuxt 2.15.6 in SSR mode and configured it with the correct baseURL in the nuxt.config.js

Interestingly, if I edit my page content and a hot module reload is triggered, the correct URL is used. Maybe the question should be if Axios is triggered in the right time, on the server?

Edit: I checked the request that was made on HMR and this was triggered in the client.js. If I call my store inside the created() hook the request gets executed successfully.

My nuxt.config.js:

  publicRuntimeConfig: {
    axios: {
      baseURL: process.env.EXPRESS_SERVER_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.EXPRESS_SERVER_URL,
    }
  },

What if you `console.log($axios)` in `asyncData`? How did you configured the `baseURL` in `nuxt.config.js`? `asyncData` and `fetch` (the hook) should produce the same result (server + client). Did you restarted your app after the `baseURL` update? — kissu, Jun 18 '21 at 08:46
Still includes the correct baseURL configured in nuxt.config.js - this contains an axios object holding `baseURL: process.env.EXPRESS_SERVER_URL` — nonNumericalFloat, Jun 18 '21 at 08:49
Maybe try to use the `runtimeConfig` for the axios configuration, as suggested in the official docs: https://stackoverflow.com/a/67983038/8816585 — kissu, Jun 18 '21 at 08:51
What if you call it entirely server side? Like at the top of your `nuxt.config.js` file, like a regular Node.js script? Does it reach the proper endpoint? — kissu, Jun 18 '21 at 08:58
I am exporting my config so I cannot call a method directly in there (I guess?). But I put everything in a `async fetch()` block which results in the correct URL being logged, but I also see an `Error in fetch(): Error: unable to verify the first certificate`. (Sometimes, at least) As stated in the config `fetch()` also gets executed on route navigation. This works correctly and fetches results correct. No certificate errors on the client side. — nonNumericalFloat, Jun 18 '21 at 09:35
Ah yeah, right. Try it in `nuxtServerInit` so: https://nuxtjs.org/docs/2.x/directory-structure/store/#the-nuxtserverinit-action — kissu, Jun 18 '21 at 09:37
That worked. calling `await this.$axios.get(...)` seems to fetch the stuff. Of course only when using NODE_TLS_REJECT_UNAUTHORIZED=0 in my .env Now, doing the same in my component also works (TLS disabled) in fetch(). So it must be the TLS thing going on. — nonNumericalFloat, Jun 18 '21 at 09:52

score 1 · Answer 1 · answered Jun 18 '21 at 09:57

1

I'm not sure what is the NODE_TLS_REJECT_UNAUTHORIZED=0 thing doing but your frontend configuration (Nuxt) is working well so far.

Sorry if I cannot help on the Express part.

Maybe try to setup HTTPS locally on Nuxt: How to run NUXT (npm run dev) with HTTPS in localhost?

answered Jun 18 '21 at 09:57

kissu

40,416
14
65
133

1

Sadly that's only the half answer as disabling TLS is not an option. My question was probably wrong for that error you got me to find out. Thanks for that! :) I probably will have to fix the root certificate on the server first. – nonNumericalFloat Jun 18 '21 at 11:04

score 0 · Accepted Answer · answered Jun 23 '21 at 15:02

TLDR; This was not related at all - I forgot to set the auth token for my backend. At the time of axios init it's not present. $axios object doesn't have auth - backend fails.

On page load the nuxt function nuxtServerInit() is used to get the auth token out of the acces_token cookie.

I am using a plugin to initialize Axios - with the token from the store. But of couse the token is not present at the time axios is initialized as nuxtServerInit is called after plugin init.

In my axios.js plugin I changed:

export default function({ app, error: nuxtError, store }) {
  const token = const token = store.state.user.token;

  app.$axios.setToken(token, "Bearer");
}

to;

export default function({ app, error: nuxtError, store }) {
  const token = app.$cookies.get("access_token");

  app.$axios.setToken(token, "Bearer");
}

Now the token is present & used for every request happening server-side.

Nuxt.Js axios not using baseURL despite it being set correctly

2 Answers2