需求:获取用户真实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中获取到了真实地址,前端能真实获取到传递给后端,后端就可以获取