后端获取nuxt项目的用户ip地址

1,859 阅读1分钟

原文我的博客:后端获取nuxt项目的用户ip地址

nuxt 使用pm2 部署好了之后,由于我申请的域名还没审核通过,于是先用ip:port方式访问爽一波,其他一切正常,但是很快我发现我获取的所有ip都是127.0.0.1,瞬间不开心了,于是开始研究bug之路。

首先先理清nuxt的工作机制:

ssr渲染: 用户(pc、手机等设备)访问nuxt服务器,nuxt服务器接收到请求,nuxt服务器向接口服务发起请求,接口返回数据给nuxt,nuxt渲染好数据返回给用户。

非ssr渲染:用户(pc、手机等设备)在nuxt客户端上直接向接口服务器发起请求,接口服务器返回数据给nuxt客户端,nuxt客户端渲染数据显示给用户。

接下来就是解决问题

nuxt 工作机制清楚了就好办了:

非ssr渲染,就是正常的应用访问获取ip问题,我们直接配置一个Nginx代理,然后转发ip,后端就可以愉快的获取ip了。

ssr渲染没有获取到ip是很正常的,因为nuxt服务端向接口服务请求,是发生在我们服务器本地的,所以要解决ssr渲染时没有获取正确ip的方法,就是在nuxt 使用ssr渲染发起请求时,把用户的ip放在我们的header中。

nuxt 的 asyncData 里面是可以获取客户端的上下文的,里面有很多参数:

asyncData({context}){
  const headers = (context && context.headers) ? Object.assign({}, context.headers)  : {}
}

我们取出用户端的header,放到我们发起请求的header中,这样后端就可以正确获取了,当然你也可以直取某些参数,自己传进去。