nuxt js, how can I get the host name of a web page at server side rendering

Question

At nuxtjs poroject, I have a configure variable of api environment like this:

[
{
  front_host: local-1.domain.com,
  backend_api: api-1.domain.com
},
{
  front_host: local-2.domain.com,
  backend_api: api-2.domain.com
},
]

I need get the right object element from the host name, for example, if the host name of my web page is "local-1.domain.name", then I shall get the object {front_host: local-1.domain.com, backend_api: api-2.domain.com}.

In nuxtjs, if the web page renders at the front end, then I can get host name by location.host, if at ssr(server side rendering), how can I get the host name?

Radiotherapy

there are few functions like asyncData, fetch, nuxtServerInit , these methods get executed in server side. Also you can try using middleware too. – Need

Answer 1

Like@divine said, there are several options you could choose from.

For example,

export default {
     async asyncData ({ req, res }) {
        if (process.server) {
         return { host: req.headers.host }
        }
    }

host will be your ssr host name

Stevie

Depending on your use-case it could error. Best to use something like: process.server ? req.headers.host : window.location.host – Fictitious

Answer 2

in nuxt 3, you could also use:

const url = useRequestURL()
console.log('host name', url.hostname)

see: https://nuxt.com/docs/api/composables/use-request-url

Johannejohannes

Answer 3

Something like below should work for you

asyncData ({ req, res }) {
  const hostname = req ? req.headers.host : window.location.host.split(':')[0]
}

Acerbate