基于Nginx反向代理获取真实IP的问题详解-创新互联

一、前言

前文Nginx 解决WebApi跨域二次请求以及Vue单页面问题 当中虽然解决了跨域问题带来的二次请求，但也产生了一个新的问题，就是如果需要获取用户IP的时候，获取的IP地址总是本机地址。

二、原因

由于Nginx反向代理后，在应用中取得的IP都是反向代理服务器的IP，取得的域名也是反向代理配置的Url的域名。

三、解决方案

解决该问题，需要在Nginx反向代理配置中添加一些配置信息，目的将客户端的真实IP和域名传递到应用程序中。同时，也要修改获取IP地址的方法。

但是需要注意的是，通过Nginx反向代理后，如果访问IP通过了几层代理，可能取得的IP地址是这种格式：clientIP,proxy1,proxy2。

如果需要将IP地址插入到数据库的话，需要做防止注入。因此要对上述的IP地址的格式进行截取。

3.1 Nginx 配置如下

server {
  listen  9461; # 监听端口号
  server_name localhost 192.168.88.22; # 访问地址
  location / {
   root 项目路径; # 例如：E:/Publish/xxx/;
   index index.html;
   
   # 此处用于处理 Vue、Angular、React 使用H5 的 History时 重写的问题
   if (!-e $request_filename) {
    rewrite ^(.*) /index.html last;
    break;
   }
  }
  
  # 代理服务端接口
  location /api {
   proxy_pass http://localhost:9460/api;# 代理接口地址
   # Host配置以及域名传递
   proxy_set_header Host $host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header REMOTE-HOST $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
 }