How can i get client's ip address when fetch data?

[qoo1476]

Environment

---

• Operating System: Windows_NT
• Node Version: v16.14.0
• Nuxt Version: 3.0.0-rc.1
• Package Manager: [email protected]
• Builder: vite
• User Config: runtimeConfig
• Runtime Modules: -
• Build Modules: -

---

👉 Report an issue: https://github.com/nuxt/framework/issues/new 17:22:54

👉 Suggest an improvement: https://github.com/nuxt/framework/discussions/new

👉 Read documentation: https://v3.nuxtjs.org

Reproduction

just installed / pure nuxt 3

Describe the bug

how can i get client's ip address when fetch data?

it works when data fetching on client side but not server side

i tried this

* ~/page/index.vue
<script lang="ts" setup>

  const test1 = await useAsyncData('key', async (app) => {
    console.log(app.ssrContext.event.req.connection.remoteAddress || app.ssrContext.event.req.socket.remoteAddress)
   // console.log => empty string
    return []
  })

  const test2 = useFetch('/api/test', {
    headers: useRequestHeaders(['cookie', 'x-forwarded-for']),
  }) // for check ip from ~/server/api/test.ts

</script>

* ~/server/api/test.ts
export default defineEventHandler(async ({ req, res, context, event }) => {
   console.log(
       req.socket.remoteAddress,
       req.connection.remoteAddress,
       req.headers['x-forwarded-for'],
     ) // it all returns empty string or undefined until request is not from browser(client)
   return []
})

both failed to read client's ip..
please let me know if i missed something. thanks

Additional context

No response

Logs

No response

[danielroe]

You would need to extract & proxy them at the point of your useFetch, or they won't be present on the SSR-to-SSR request.

[qoo1476]

oh i got it...

i got empty string with this point

  const test1 = await useAsyncData('key', async (app) => {
    console.log(app.ssrContext.event.req.connection.remoteAddress || app.ssrContext.event.req.socket.remoteAddress)
   // console.log => empty string
    return []
  })
...

it's because i ran it development mode( 'yarn run dev')

when i run build and then run on preview mode then i got the right ip address at the same point...

ok now i know what i gotta doing

thanks @danielroe

[ahku]

I'm also curious about this one. Can't seem to get the client's IP from the server request.

[InerkyJad]

also interested, i have a server/api/csrf.post.ts file

export default defineEventHandler((e) => {
  console.log(e.node.req.socket.remoteAddress || e.node.req.headers["x-forwarded-for"])
  return ""
});

but i only get empty string or null or undefined, i have also tried other methods of getting the ip but nothing seams to work, and i don't know if the reason is because of H3 event, how can we access the req itself instead of H3 event ?

[v3nt]

Did anyone solve this?

[memic84]

We've had succes with the following:
const ip = getRequestHeader(event, 'x-forwarded-for')

Also don't forget that the XFF can be multiple values (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-For), so you'll need to extract the first value or the one you need.

You can find more documentation on the h3 github: https://github.com/unjs/h3

[zavvla]

I'm sorry for the stupid question, but I don't understand...

I need to pass the user's IP as one of the signature attributes in my service.

In setup, I get an ip using
const ip = use Request Header("x-forwarded-for");

I save the value of the variable, I see the ip.

But when I try to pass a value to a useFetch of the post type, I get undefined, while the ip is output in the template without problems.
When I try to write to the store, I also get undefined.

Can someone suggest a way around this or suggest a solution?

[buffreak]

Do it with condition process.server and save the ip in state. And you can use it anywhere