网站首页 技术知识

1、目的

通过ssr渲染页面时 node端请求后端接口 获取真实ip

2、问题

目前通过接口获取不到用户真实ip而是服务器的ip

3、原因

因为接口是nuxt的ssr服务器端渲染接口，并不是普通客户端请求接口（ssr的原理是从node服务器端发起的请求，而我们的nuxt项目是部署在服务器上，所以获取到的ip实际上是我们服务器的ip）

4、解决方案

通过nginx获取真实ip

1、nginx转发请求到node服务中，在header里面设置X-Real-IP和X-Forwarded-For

location / {
    proxy_set_header Host $http_host; 
    # 针对首层代理，拿到真实IP    【 $remote_addr值 = 用户ip 】
    proxy_set_header X-Real-IP $remote_addr;
    # 这个变量的意思其实就像是链路反追踪，从客户的真实ip为起点，穿过多层级的proxy ，最终到达web 服务器，都会记录下来
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Nginx-Proxy true;
    proxy_cache_bypass $http_upgrade;
    proxy_pass http://localhost:8090/;
}

2、前端在进行服务端渲染的时候，在async asyncData里面获取req，如图所示

3、req里面会有 nginx设置进去的header，把它重新设置到axios的header中

4、这样后端就能从header中拿到用户的真实ip了