使用ipapi获取IP地址：移动端无法显示的原因及解决办法

可能的原因 #

• 移动端网络环境限制：部分移动运营商的网络会拦截或限制对ipapi.co这类第三方IP查询接口的请求，导致接口调用失败。
• 缺失错误处理逻辑：当前代码没有捕获axios请求失败的情况，一旦移动端请求出错，setIP不会触发，页面就会显示空内容。
• 接口访问限制：ipapi.co可能对移动端请求有频率限制或识别为非可信请求，拒绝返回数据。
• 混合内容问题：如果你的网站是HTTP协议，而调用的ipapi.co是HTTPS接口，部分移动端浏览器会阻止这种混合内容请求。

解决方法 #

1. 添加错误捕获逻辑 #

先给请求加上错误处理，明确移动端的具体错误：

import { useEffect, useState } from "react";
import axios from "axios";

function ObterIP() {
    const [ip, setIP] = useState("");
    useEffect(() => {
        ipUtilizador();
    }, [])

    const ipUtilizador = async () => {
        try {
            const response = await axios.get('https://ipapi.co/json');
            setIP(response.data.ip);
        } catch (error) {
            console.error('获取IP失败:', error);
            setIP('无法获取IP地址'); // 显示错误提示
        }
    };
    return <>
        <h1>{ip}</h1>
    </>
}
export default ObterIP;

通过控制台的错误信息，可以精准定位是网络拦截、跨域还是接口限制的问题。

2. 替换为更稳定的IP查询接口 #

如果ipapi.co在移动端访问不稳定，可替换为兼容性更好的接口：

// 替换请求地址为api.ipify.org
const response = await axios.get('https://api.ipify.org?format=json');
setIP(response.data.ip);

这个接口跨域支持完善，对移动端网络的兼容性更强。

3. 检查网站协议一致性 #

确保你的网站和调用的接口使用相同的协议（都是HTTPS或都是HTTP），避免移动端浏览器的混合内容拦截。现在推荐全站使用HTTPS，这也能提升移动端的访问安全性。

4. 移动端调试定位问题 #

使用Chrome远程调试功能连接手机浏览器，查看控制台的错误日志，比如是否有CORS错误、请求超时或403/404等状态码，根据具体错误针对性解决。

内容的提问来源于stack exchange，提问作者Eleitor Biondo