3

I've read through all the docs for Nuxt.js environment variables and the Axios module but I'm still quite confused on how to properly set them up for my use case.

I want to query 2 separate APIs:

  1. my own backend with user authentication (e.g. JWT) built with Nuxt serverMiddleware
  2. a public API that requires an account and provides an API key (e.g. TMDB)

My own backend serves as an "extension" of the public API so that I can store additional data for my users.

Now my question is how do I set up my environment variables so that I can safely send dynamic requests to the public API without exposing its private API key? Do I need to use my own backend as a "proxy" and forward client side requests to the public API from there? Or can I directly send requests inside asyncData and fetch when running in SSR mode?

I think I need a general explanation on how Nuxt publicRuntimeConfig and privateRuntimeConfig, and Axios baseURL and browserBaseURL all work together. The docs didn't explain them clearly enough for me.

DaDo
  • 443
  • 1
  • 6
  • 20

2 Answers2

2

This question is mixing a lot of stuff at the same time but in no specific order:

  • you need to run your private call on the server and use privateRuntimeConfig which is available only on the server
  • fetch() and asyncData() will run both on server and client side (can be forced to be run only on client side with fetchOnServer: false), and it's not a good idea to have those on client since everything there can be publicly seen
  • if you want to have several instances of axios, a quick search can be helpful to setup this
  • if you want to use axios in serverMiddleware you'll need to install and import a regular axios since it will be out of the scope of Nuxt
  • for the most part, if an API is supposed to be used from a front-end you can sometimes use the public API key provided (can be stored in publicRuntimeConfig), if it should remain secret, you'll need a backend to hide it in-between
  • baseURL is pretty much the default value, browserBaseURL as explained in the docs is mainly an override specific to client-side requests, use it if you need to have something different and that overrides the baseURL one
  • there are several questions that can be found about how to hide some calls when using an SPA (common question), the incoming edge-side rendering of Nuxt3 may maybe help on this one
  • one thing to bear in mind is that only the first initial reach to the server will run a server query, everything else will be a hydrated-SPA app meaning that you will not reach back the server after the hydration step (like a MPA Wordpress server would do)
kissu
  • 40,416
  • 14
  • 65
  • 133
  • So if I'm following along correctly, the recommendation here is to: Use `baseUrl` to configure Nuxt's default axios instance to speak to the OP's "own backend" and then configure a _second_ axios instance for querying the separate "public api", but storing the api key for that external service in the `privateRuntimeConfig` and somehow making that second axios instance only run server-side? I personally could still sure use an example of how all these pieces fit together, like the OP. – beporter Sep 08 '21 at 18:40
  • No, the opposite in terms of axios (the NON `nuxt/axios` one should be in `serverMiddleware`). As for what is run only on the server, there are a few ones like `nuxtServerInit` and `serverMiddleware` (maybe something else?). So not a lot as you can see in the [Nuxt lifecycle](https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle). Also, I don't have a backend under the hand and I guess that it all depends of your project too so yeah, not worth the time to create a project myself here IMO @beporter – kissu Sep 10 '21 at 12:12
0

You should send requests only to your private server and it should:

  1. Perform the logic and send the result if it's your custom endpoint
  2. Add API KEY to query and forward the query to the public API if it's public API endpoint.
Vulwsztyn
  • 2,140
  • 1
  • 12
  • 20
  • This doesn't really answer the question of how to configure Nuxt to access two different APIs in both server and client contexts. I get what you're saying about proxying requests from the client through your private API server, but that doesn't address how to configure Nuxt to talk to a _second_ API service. – beporter Sep 08 '21 at 13:18