Как узнать IP адрес в приложении на Nuxt 3/4

Получение IP адреса клиента в Nuxt 3

Веб-приложения часто нуждаются в получении IP адреса клиента для различных целей: от обеспечения безопасности до персонализации контента. В этой статье мы рассмотрим, как настроить сервер Nginx для передачи IP адреса клиента и как получить этот адрес в приложении на Nuxt 3.

Настройка Nginx для передачи IP адреса клиента

Для начала, необходимо настроить сервер Nginx таким образом, чтобы он передавал IP адрес клиента в заголовках запроса к вашему приложению на Nuxt 3.

1. Настройте конфигурацию Nginx:
   Откройте файл конфигурации Nginx для редактирования. Обычно это файл /etc/nginx/sites-available/default или ваш собственный файл конфигурации, если вы его создавали.

   sudo nano /etc/nginx/sites-available/default
   

   Bash

2. Добавьте заголовки для передачи IP адреса:
   В секции server  директиве locationвашей конфигурации Nginx добавьте следующие строки:

   proxy_set_header X-Real-IP $remote_addr; 
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
   proxy_set_header X-Forwarded-Proto $scheme;
   

   nginx

   Пример конфигурации nginx с добавленными строками для передачи IP адреса:

   server {
    listen 80;
    server_name yourdomain.com;
    location / {
      proxy_pass http://localhost:3000; # Убедитесь, что это правильный адрес вашего Nuxt приложения
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_cache_bypass $http_upgrade;
     }
   }

   nginx

3. Перезапустите Nginx:
   Сохраните изменения и перезапустите Nginx для применения новой конфигурации.

   sudo systemctl restart nginx
   

   Bash

   с серверной стороной закончили, переходим в приложение Nuxt

Получение IP адреса клиента в приложении

После настройки Nginx для передачи IP адреса, нужно получить этот адрес в вашем Nuxt 3 приложении. Это можно сделать, добавив серверный API маршрут.

1. Создайте серверный API маршрут: В папке вашего проекта Nuxt 3 создайте файл API маршрута. Например, ip.js в папке server/api.

   // server/api/ip.js
   export default defineEventHandler((event) => {
    const forwarded = getRequestHeader(event, 'x-forwarded-for')
    const ip = forwarded ? forwarded.split(/, /)[0] : event.node.req.socket.remoteAddress
    return { ip }
   })
   

   JavaScript

2. Используйте IP адрес в вашем приложении:
   Теперь вы можете делать запросы к этому API маршруту, чтобы получить IP адрес клиента. Например, используя fetch:

   // Внутри компонента или страницы
   async fetch() {
    const res = await fetch('/api/ip')
    const data = await res.json()
    console.log(data.ip) // Вывод IP адреса клиента в консоль
   }

   JavaScript

Заключение

В этой статье мы рассмотрели, как настроить сервер Nginx для передачи IP адреса клиента и как получить этот адрес в приложении на Nuxt 3. Настройка Nginx и использование серверных API маршрутов в Nuxt 3 позволяет эффективно работать с IP адресами клиентов, что может быть полезно для различных целей, таких как безопасность, аналитика и персонализация.