如何在Nuxt的asyncData方法中获取用户的IP地址？

Question

Nuxt使用asyncData在服务器端运行代码，然后将其与数据对象合并。

我想进行一次需要知道用户IP的调用。我看到可以访问req对象，它确实有该信息，但是它被深深地嵌套在那里，我担心这不是一个可靠的方法。

如何在服务器端访问调用用户的IP地址而非客户端？

- dsp_099

Answer 1

如果Nuxt在代理（例如nginx）后运行，则可以通过读取x-real-ip或x-forwarded-for在asyncData中获取客户端的IP地址。请注意，如果调用已通过其他代理传递，则x-forwarded-for可能包含逗号分隔的IP（如果有多个条目，则客户端为第一个条目）。

请务必在您的nginx站点配置中设置标头。

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

然后你可以在asyncData中读取标头：

  async asyncData(context) {
    if (process.server) {
      const req = context.req
      const headers = (req && req.headers) ? Object.assign({}, req.headers) : {}
      const xForwardedFor = headers['x-forwarded-for']      
      const xRealIp = headers['x-real-ip']
      console.log(xForwardedFor)
      console.log(xRealIp)
    }
  }

- Chris Nilsson

---

很棒的答案，我之前没有考虑过利用服务器本身。以前让我担心的是 - 你会得到一系列像你提到的IP地址。 - dsp_099

Answer 2

有一个关于这个问题的Github讨论，可以在本地和生产环境中轻松获取IP地址。

最初的回答：

const ip = req.connection.remoteAddress || req.socket.remoteAddress

请注意，您需要确保代理标头正确转发。因为nuxt在传统的web服务器后面运行，如果没有将代理标头转发，您将始终获得Web服务器的本地IP（除非环回已更改）。"Original Answer"的翻译是"最初的回答"。

- Ohgodwhy

---

我无法解决这个问题，因为我正在Heroku上托管，并且似乎我得到了一个remoteAddress数组，我真的不想在客户端暴露敏感密钥。 - dsp_099

这个解决方案在客户端非常出色，但在 Nuxt 的 asyncData 部分似乎无法正常工作，返回 undefined。 - dsp_099