HOWTO · JavaScript
如何在 JavaScript 中获取客户端 IP 地址
了解浏览器 JavaScript 如何使用 ipify、ipinfo 或 Abstract 检索服务观察到的公共 IP 地址。
本页内容
浏览器 JavaScript 无法直接读取设备的公共 IP 地址。它可以向 IP 查询服务发送请求，该服务会报告它为该请求观察到的公共地址。这与本地网络中使用的私有地址不同。该请求还会与第三方提供商共享访问者的 IP 地址，因此请选择数据处理方式适合你的应用的服务。
下面的示例使用现代浏览器中可用的 fetch。它们涵盖三个提供商：ipify 提供仅含 IP 的响应，ipinfo 提供 IP 和位置字段，Abstract 提供地理位置数据。请根据你的应用需要的字段、提供商是否需要凭据以及你将如何保护任何凭据来进行选择。这些请求从访问者的浏览器运行，因此提供商会看到访问者的公共 IP。提供商的可用性、响应字段和访问规则可能会发生变化；部署前请查阅提供商的最新文档。
使用 ipify 获取公共 IP 地址
ipify 在 https://api.ipify.org?format=json 提供了一个 JSON 端点。响应包含一个 ip 属性。此示例读取该值并将其显示出来。ipify API 仓库 包含该项目的源代码。
// Use a representative response so the parsing path is deterministic.
globalThis.fetch = async () => ({
ok: true,
json: async () => ({ ip: '203.0.113.42' }),
});
(async () => {
try {
const response = await fetch('https://api.ipify.org?format=json');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
console.log(data.ip);
} catch (error) {
console.log('Could not retrieve the public IP:', error.message);
}
})();
203.0.113.42
该请求在解析 JSON 之前检查 HTTP 状态，然后读取 ip 字段。如果失败，请检查浏览器的网络面板，了解连接、服务或内容安全策略方面的详细信息。此方法返回 ipify 观察到的地址；它不会泄露设备的私有 LAN 地址。当仅含 IP 的响应就足够且不需要额外的位置字段时，请使用此方法。
使用 ipinfo 获取 IP 和位置数据
ipinfo 返回一个 ip 字段，并可能提供与位置相关的字段，例如 city、region、country 和 loc。该示例使用一个代表性响应来展示如何读取这些字段；其本地 fetch 替代使演示不依赖于网络访问。对于实际请求，请使用下面所示的 JSON 端点。可用字段和访问可能取决于请求和提供商的当前要求，因此请查阅提供商关于凭据和套餐限制的文档，而不要依赖固定的配额数字。
// Replace this local response with the provider's live response in your app.
globalThis.fetch = async () => ({
ok: true,
json: async () => ({
ip: '203.0.113.42',
city: 'Austin',
region: 'Texas',
country: 'US',
loc: '30.2672,-97.7431',
}),
});
(async () => {
try {
const response = await fetch('https://ipinfo.io/json');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
console.log('IP:', data.ip);
console.log('Location:', data.city, data.region, data.country);
} catch (error) {
console.log('Could not retrieve IP information:', error.message);
}
})();
IP: 203.0.113.42
Location: Austin Texas US
当你只需要观察到的地址时，请使用 ip 字段。附加字段可以支持广泛的区域显示，但位置数据是近似的，并且取决于提供商的数据；它不能确定设备的精确位置。如果请求失败，请检查网络响应以及端点的当前访问要求是否适用于你的使用情况。
使用 Abstract 获取 IP 和地理位置数据
Abstract 提供了一个 IP 地理位置端点。其请求使用 API 密钥，因此请通过提供商创建一个密钥，并替换下面的占位符。URL API 将密钥编码为查询参数。此示例使用一个代表性响应，并打印其 IP 和位置字段；本地 fetch 替代使解析示例具有确定性。对于实际请求，在为你的界面选择字段之前，请查阅提供商关于账户访问、配额和响应架构的最新文档。嵌入浏览器 JavaScript 中的密钥对访问者可见；如果密钥必须保持私密，请使用服务器端代理。
// Replace this local response with the provider's live response in your app.
globalThis.fetch = async () => ({
ok: true,
json: async () => ({
ip_address: '203.0.113.42',
city: 'Austin',
region: 'Texas',
country: 'United States',
latitude: 30.2672,
longitude: -97.7431,
}),
});
(async () => {
const apiKey = 'YOUR_ABSTRACT_API_KEY';
const url = new URL('https://ipgeolocation.abstractapi.com/v1/');
url.searchParams.set('api_key', apiKey);
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
console.log('IP:', data.ip_address);
console.log('Location:', data.city, data.region, data.country);
console.log('Coordinates:', data.latitude, data.longitude);
} catch (error) {
console.log('Could not retrieve geolocation data:', error.message);
}
})();
IP: 203.0.113.42
Location: Austin Texas United States
Coordinates: 30.2672 -97.7431
该示例从返回的对象中读取 IP 和位置字段。本地样本仅演示解析；它不验证实际的服务响应。缺失、被拒绝或受限制的 API 密钥可能导致错误响应；网络和服务故障也可能阻止获得结果。请在应用中处理这些情况，并在调整示例以显示特定字段时检查响应和提供商文档。当 Abstract 当前的响应和访问条款适合你的应用所需的位置数据时，请选择 Abstract。