nuxt框架获取用户真实的ip

需求：获取用户真实ip，接口数据请求多次（爬虫）禁用用户，拉入黑名单

在这个需求中，前端所需要做的是，在接口请求将真实ip传入

1.客户端渲染和服务器端渲染

简单理解一下客户端渲染和服务器端渲染

1.客户端渲染

客户端渲染，是服务端给客户端相应数据，客户端进行将数据生成DOM元素在浏览器进行渲染

2.服务器端渲染

服务器端直接返回html结构给浏览器进行渲染

3.区别

服务器端渲染更利于seo引擎。

2.nuxt

nuxt的服务器端是node.js

在正常请求接口过程中，后端可以进行获取真实ip,但是因为使用nuxt,很多请求是node进行了，是服务器端请求返回渲染，因此服务器端渲染的接口需要传入ip就需要nginx进行转发获取。

1.正常的请求(不写在asyncData的请求)，想要获取真实的ip

在app.html中获取真实ip,写入全局环境

<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> 
<script> 
		widnow.ip =  global.ip = document.write(returnCitySN["cip"]) 
</script>

在request封装请求中判断使用

客户端请求，取全局ip

2.服务器端请求的接口获取ip

服务器端请求是需要在nginx中配置转发，从nginx获取真实ip转发，在nginx中进行添加配置

location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Real-Port $remote_port;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

nginx配置好之后，需要获取配置在请求接口

store中的nuxtServerInit进行获取转发地址

 利用一个js文件同步获取

最后配置在请求头中传递后端

只要是在nginx中获取到了真实地址，前端能真实获取到传递给后端，后端就可以获取