如何以角度(打字稿)从浏览器获取客户端IP地址

Posted

技术标签:

【中文标题】如何以角度(打字稿)从浏览器获取客户端IP地址【英文标题】:How to get the client ip address from browser in angular (typescript) 【发布时间】:2017-11-17 02:39:15 【问题描述】:

如果您能给我提供一个示例,其中类型脚本类可以获取客户端 IP 地址和客户端正在使用的浏览器并在变量中设置这些值,我将不胜感激

我想在类型脚本中而不是在 java 脚本中这样做是可能的,如果不是,如何使用类型脚本来做到这一点

- 所以例如我可以 1)在将表单提交到后端数据库时设置这些变量 2)例如,我可以为用户显示他正在使用的浏览器 任何帮助将不胜感激,谢谢

【问题讨论】:

How to get client's IP address using javascript only?的可能重复 developer.mozilla.org/en-US/docs/Web/API/Window/navigator 检查以下答案。 This works for me 2020 年。 【参考方案1】:

非常感谢,非常好的解决方案 我把它作为我的问题的基础,但我没有解决它,因为它给了我互联网服务器的公共 IP。 对于使用 DHCP 的内部网络,通过以下方式更改 URL:

  getIpCliente(): Observable<string> 
      return this.http.get('http://api.ipify.org/?format=jsonp&callback=JSONP_CALLBACK') // ...using post request '
      .map((res:Response) => console.log('res ', res);
                              console.log('res.json() ', res.text());
                              //console.log('parseado ', JSON.parse(res.text()));
                              console.log('parseado  stringify ', JSON.stringify(res.text()));
                              let ipVar = res.text();
                              let num = ipVar.indexOf(":");
                              let num2 = ipVar.indexOf("\");");
                              ipVar = ipVar.slice(num+2,num2);
                              console.log('ipVar -- ',ipVar);
                              return ipVar); // ...and calling .json() on the response to return data
      //.catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any
  

希望能为各位朋友服务

【讨论】:

这没有被格式化为答案 - 因为这个属于 cmets 的响应。 我标记你了,因为这个答案返回了一个 cors 错误 Aaron,我很抱歉它对你不起作用,朋友。以示例为例的应用程序正在生产中,没有您提到的问题。你在后台配置了CORS吗?我的背部是在 springboot 中完成的,以下帮助了我:spring.io/guides/gs/rest-service-corsbaeldung.com/spring-cors我希望它有效问候,Juan- 如果您收到从 Angular 调用 api.ipify.org 端点的 CORs 错误,请检查正在发送的标头。您始终可以将第二个参数发送到清除默认标头的 http.get 调用:this.httpClient.get(url, headers: null )。还要检查您的 Angular 应用程序是否有一个 httpInterceptor 可能会注入额外的授权标头。 在部署使用代理给我服务器IP并直接点击后,被阻止的内容问题也尝试了“ headers: null ”,但没有任何效果。有什么解决办法吗?【参考方案2】:

尝试https://geolocation-db.com的服务获取用户的公网ip。

import  HttpClient  from "@angular/common/http";
import  catchError, tap  from "rxjs/operators";

this.http.get<any>('https://geolocation-db.com/json/')
  .pipe(
    catchError(err => 
      return throwError(err);
    ),
    tap(response => 
      console.log(response.IPv4);
    )
  )

【讨论】:

【参考方案3】:

你应该这样尝试

var json = 'http://ipv4.myexternalip.com/json';
   $http.get(json).then(function(result) 
    console.log(result.data.ip)
,  function(e) 
   alert("error");
);

【讨论】:

或者试试这个 networkinterface.getIPAddress(function (ip) alert(ip); ); 感谢哈马德的回答,但这在类型脚本类中不起作用【参考方案4】:

试试这个:

创建提供者并添加具有所需依赖项的函数:

import  Injectable      from '@angular/core';
import  Http, Response, Headers, RequestOptions  from '@angular/http';
import Observable from 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/Rx';


 //  Function :

getIP(): Observable<Data[]> 
    return this.http.get('http://ipinfo.io') // ...using post request
    .map((res:Response) => res.json()) // ...and calling .json() on the response to return data
    .catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any

控制器代码:

getIP() 
    this.loading = true;
    this._myIPService.getIP()
    .subscribe(
        IPDetails => this.IppDetails,
        error =>  this.errorMessage = <any>error
        );

您将在this.IppDetails 中获得 IP 的所有详细信息

【讨论】:

感谢您的回答,但为什么我应该在服务中提供 id 参数而我应该从服务器获取数据,我认为 getIP(id) 在我们的案例中不是正确的签名跨度> 这是我的打字错误,不需要id 那么这会返回一个字符串一个对象还是什么? 返回json对象 我确定它确实有效,我已经使用了 3 个月了,你一定错过了什么。

以上是关于如何以角度(打字稿)从浏览器获取客户端IP地址的主要内容,如果未能解决你的问题,请参考以下文章

带有打字稿的 Angular 5 websocket 示例

如何在猫鼬(打字稿)中获取模型的_id

如何在打字稿websocket上发送消息

如何通过两个对象打字稿角度6进行比较

打字稿:使 tsconfig 发出一个文件夹而不是另一个文件夹

在打字稿中创建指令以显示角度加载进度