javascript - 如何在 Nuxt 的 asyncData 方法中获取用户的 IP?

标签 javascript vue.js geolocation nuxt.js

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

我想调用电话,要求我知道用户的 IP。 I see that I can get to the req object确实有它,但它被埋没了deep, deep在那里,我担心这不是一种可靠的方法。

如何在服务器端而不是客户端访问调用用户的 IP 地址?

最佳答案

如果 nuxt 在 nginx 等代理后面运行,那么可以通过读取 x-real-ip 或 x-forwarded-for 来获取 asyncData 中客户端的 IP 地址。请注意,如果调用通过了其他代理,则 x-forwarded-for 可以包含逗号分隔的 IP(如果有多个条目,则客户端是第一个)。

确保在您的 nginx 站点配置中设置 header

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中的headers了:

  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)
    }
  }

关于javascript - 如何在 Nuxt 的 asyncData 方法中获取用户的 IP?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57335203/

相关文章:

javascript - Node.js 中的 JSON.parse 问题

javascript - FileReader、图像和 <canvas> 的高 JavaScript 内存使用率

javascript - 如果第二级菜单列表中某个组列表同时处于事件状态,如何将其他组列表设置为非事件状态?

php - 我如何使用 CloudFlare 地理定位检测所有欧洲国家

objective-c - iOS 5 区域监控 : Can new regions be created based on users current coordinates from coreLocation?

javascript - 如何在单页面中动态创建多个模态

javascript - 通过更新查询将php文件上传到数据库

javascript - [Vue 警告] : Cannot find element: #app - Vue. js 2

vue.js - 运行 SonarQube 扫描时出错 : ERROR: Failed to parse file [FILENAME] at line 27: 'import' and 'export' may appear only with 'sourceType: module'

javascript - iOS6 Mobile Safari : Accuracy and update periods of geolocation. watchPosition