Next.js-解决axios获取真实ip问题

前言

上篇文章中我使用了ip2region获取到了ip归属地，但是我发现我的框架next.js通过k8s发布到生产环境之后发现获取的ip是pod的ip而不是真实的外网ip，下面就来谈谈如何解决！

操作

首先我想到的是可能是阿里云ACK自己的问题，于是问了他们客服之前机器人给了下面的解决方案：

ACK容器集群应用Pod如何获取客户端真实IP
ACK容器集群Pod如何获取客户端真实IP？
如果您未使用WAF，且集群是通过SLB暴露的业务，请检查Service的YAML文件，确保externaltrafficpolicy为Local模式，该模式下可获取到客户端真实IP。如果集群是通过Ingress暴露的业务，请检查nginx-ingress-lb的externaltrafficpolicy，确保externaltrafficpolicy为Local模式。

如果您使用了WAF，请参见K8s Ingress获取真实IP地址处理。

发现解决不了问题之后，下面是他们客服给的解决方案：

1、查看service中nginx-ingress-lb外部流量策略是不是Local

发现设置的就是Local，所以通过！

2、设置nginx-configuration

执行下面命令：

kubectl -n kube-system edit cm nginx-configuration

在data中添加下面内容：

compute-full-forwarded-for: "true" 
forwarded-for-header: "X-Forwarded-For" 
use-forwarded-headers: "true" 
enable-real-ip: "true"

设置好即生效，通过！

3、查看deploy无状态的nginx-ingress-controller日志中展示是不是真实ip

172.22.32.48 - [172.22.32.48] - - [31/Aug/2023:11:49:00 +0800] "GET /api/space/info/urlCategory/zhangwei HTTP/1.1" 200 20188 "-" "axios/1.5.0" 320 0.059 [seaurl-testapi-seaurl-gatewayserver-svc-7777] 172.22.32.57:7777 20188 0.059 200 9c6a2589d7926d266abe56b6e4b38488 testapi.seaurl.com []
114.222.247.210 - [114.222.247.210] - - [31/Aug/2023:11:49:01 +0800] "GET /api/space/crud/urlCategory/zhangwei/categoryTreeList HTTP/2.0" 200 20188 "https://test.seaurl.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36" 56 0.027 [seaurl-testapi-seaurl-gatewayserver-svc-7777] 172.22.32.57:7777 20188 0.027 200 e165866b16394694c332e82aa47de562 testapi.seaurl.com []

通过上面显示，发现每次使用的pod的ip都是axios请求的，真实的都是客户端浏览器请求的，这是为啥呢？？？

分析

于是我就开始分析起造成的原因，因为客户端浏览器发起的请求就是真实的ip，服务端next.js中的axios发起的请求就是pod的ip，再结合之前next.js遇到的cookie问题，我终于破案了！

心机之蛙一直摸你肚子！

浏览器请求(真实ip)->nginx-ingress-controller->spring cloud gateway
next.js所在的pod中的axios请求(pod ip)->nginx-ingress-controller->spring cloud gateway

分析问题：
也就是说浏览器请求的X-Forwarded-For请求头使用的就是外部真实的ip，而next.js所在的pod的axios发起的请求头中我没有设置X-Forwarded-For，所以它默认使用的是pod的ip。

解决：
只要在next.js中设置axios请求头X-Forwarded-For即可，如下所示：

export const getServerSideProps = wrapper.getServerSideProps(store => async (ctx) => {

    const ip = ctx.req.headers['x-forwarded-for'] || ctx.req.connection.remoteAddress;
    axios.defaults.headers.cookie = ctx.req.headers.cookie || null
    axios.defaults.headers['X-Forwarded-For'] = ip

这样真实的ip就会设置到axios请求头中，完美解决！！！

IP属地：中国|0|江苏省|南京市|电信

总结

1、首先排除是阿里云ACK的问题
2、分析后才知道是next.js使用axios导致的，修改请求头即可解决。