nginx获得客户端IP地址和使用的端口

文档说明：只记录关键地方; 2022-11-03

nginx 获得IP地址

default.conf 配置如下

 
    # 返回json格式
    location /ip/json {
        charset utf-8;
        default_type application/json;
        return 200 '{
                        "request_time":"$time_local",
                        "ip":"$remote_addr",
                        "port":"$remote_port",
                        "message":"获取到IP地址啦！😁😄😜😋🤗😅😇🥰🥳",
                        "user_agent":"$http_user_agent"
                    }'
        ;
    }
 
    # 返回jsonp格式
    location /ip/jsonp {
        set $callback "callback";
        if ($arg_callback) {
           set $callback $arg_callback ;
        }
        charset utf-8;
        default_type application/javascript ;
        return 200 '$callback({
                        "request_time":"$time_local",
                        "ip":"$remote_addr",
                        "port":"$remote_port",
                        "message":"获取到IP地址啦！😁😄😜😋🤗😅😇🥰🥳",
                        "user_agent":"$http_user_agent"
                    })'
        ;
    }

网页端使用接口数据

 
    // 一 使用 JSON 接口
    fetch('https://detect-ip.xiaoshuogeng.com/ip/json').then(res=>res.json()).then(res=>{
        console.log(res)
        // 展示数据
 
    })
 
 
    //二 使用JSONP 接口 
    let do_get_ip=()=>{
        let script=document.createElement('script');
        script.src='https://detect-ip.xiaoshuogeng.com/ip/jsonp?callback=show_client_IP'
        script.setAttribute('type','application/javascript')
       let mount_endpoint=document.body.lastChild;
        mount_endpoint.parentNode.insertBefore(script,mount_endpoint)
        mount_endpoint.parentNode.removeChild(script)
    }
 
    let show_client_IP=(data)=>{
        console.log(data)
        document.querySelector('#ip_addr').value=data.ip
    }
    //注册为全局函数
    window.show_client_IP=show_client_IP
    //执行获取IP信息
    do_get_ip()
 
 

参考文档

1. insertBefore的用法
2. mdn fetch 用法
3. nginx解决跨域关键点

实践结果

• 获取客户端 json 接口
• 获取客户端 jsonp接口