如何通过Angular判断客户端处于办公网络内还是外部网络

以下是几个实用的实现思路，可根据你的办公网络环境选择适配的方案：

1. 请求内网专属资源/API #

利用办公内网独有的可访问资源（比如内网静态文件、专属接口），通过请求结果判断网络环境：

• 实现步骤：

  • 在办公内网部署一个仅内网可访问的简单接口（比如返回{ status: 'intranet' }），或放置一个静态文件（如intra-check.txt）
  • 在Angular服务中发起请求，根据请求成功/失败状态判断网络环境

• 代码示例：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError, map, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class NetworkCheckService {
  private intranetCheckUrl = 'http://intra.yourcompany.com/api/check-intranet'; // 内网专属地址

  constructor(private http: HttpClient) {}

  isIntranet(): Promise<boolean> {
    return this.http.get(this.intranetCheckUrl, { responseType: 'text' })
      .pipe(
        map(() => true),
        catchError((err: HttpErrorResponse) => {
          // 超时、404、网络错误都判定为外网
          return of(false);
        })
      )
      .toPromise();
  }
}

• 优势：判断逻辑可靠，不受IP段变化影响；劣势：需要内网有专属服务支持

2. 检测客户端IP所属网段 #

办公内网通常使用私有IP段（如10.0.0.0/8、172.16.0.0/12、192.168.0.0/16），通过获取客户端IP并匹配网段判断：

• 实现步骤：

  • 后端接口返回客户端的真实IP（前端无法直接获取准确的公网/内网IP，需后端配合）
  • 在Angular中解析IP，判断是否属于内网私有网段

• 代码示例：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class NetworkCheckService {
  constructor(private http: HttpClient) {}

  async isIntranet(): Promise<boolean> {
    const ip = await this.http.get<string>('/api/get-client-ip').toPromise();
    return this.isPrivateIp(ip);
  }

  private isPrivateIp(ip: string): boolean {
    const parts = ip.split('.').map(Number);
    // 匹配私有IP段规则
    return (
      parts[0] === 10 ||
      (parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) ||
      (parts[0] === 192 && parts[1] === 168)
    );
  }
}

• 优势：无需额外内网资源；劣势：依赖后端返回IP，若办公内网使用非标准私有IP段需调整判断规则

3. 尝试解析内网专属域名 #

利用内网DNS服务器才能解析的专属域名，通过解析结果或请求状态判断：

• 实现步骤：

  • 配置一个仅内网DNS可解析的域名（如intra-only.yourcompany.com）
  • 在Angular中尝试请求该域名下的资源，成功则判定为内网

• 代码示例：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, map, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class NetworkCheckService {
  private intraDomainUrl = 'http://intra-only.yourcompany.com/ping';

  constructor(private http: HttpClient) {}

  isIntranet(): Promise<boolean> {
    return this.http.head(this.intraDomainUrl, { observe: 'response' })
      .pipe(
        map(() => true),
        catchError(() => of(false))
      )
      .toPromise();
  }
}

• 优势：无需后端接口配合；劣势：依赖内网DNS配置，若客户端DNS缓存可能导致误判

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