如何在 Nuxt 3 中间件获取当前域名？

Question

我不能在这里使用 window.location 因为它是 SSR 应用程序。useRouter、useRoute 和 useNuxtApp 也没有域名。nuxtApp.ssrContext 未定义。

export default defineNuxtRouteMiddleware((to: any, from: any) => {
  console.log("GET HOST HERE")
})

Answer 1

我只是错过了在获取 nuxtApp.ssrContext 之前检查 process.server 。这是我的问题的答案：

export default defineNuxtRouteMiddleware((to: any, from: any) => {
  const nuxtApp = useNuxtApp()
  let host = ''
  if(process.server) {
    // for 3.0.0.rc_vercions: host = nuxtApp.ssrContext.req.headers.host
    // UPD 27.01.23:
    host = nuxtApp.ssrContext?.event.node.req.headers.host
  } else {
    host = window.location.host
  }
})

Answer 2

The helper function useRequestURL() was introduced with the release of v3.5.0 of Nuxt. Getting the current url, the protocol scheme, the host, the hostname and the path is very easy:

const url = useRequestURL()

const currentUrl = url.href     // https://example.com:3000/hello-world    
const protocol = url.protocol   // https:
const host = url.host           // example.com:3000
const hostname = url.hostname   // example.com
const pathname = url.pathname   // /hello-world

or if only the hostname is needed we can access the object property directly:

const hostname = useRequestURL().hostname

Since useRequestURL() works on both server-side and client-side there is no need to check for the process.server. The function returns the familiar URL object which properties with their descriptions can be found in the MDN documentation.

Nuxt have updated their documentation and the description of the useRequestURL() can be found in the Composables section.