获取Angular 5中的IP地址

Question

我想从http://freegeoip.net/json/?callback 获取Angular 5中的客户端IP地址
我有一个服务

@Injectable()
export class JobService {
constructor(    
    private http: HttpClient) { }
    getIpAddress() {
            const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
            return this.http
              .get('http://freegeoip.net/json/?callback',
              { headers: headers })
              .map(response => response || {})
              .catch(this.handleError);
          }

      private handleError(error: HttpErrorResponse): Observable<any> {
         console.error('observable error: ', error);
         return Observable.throw(error);
      }
}

并在jobcomponent中调用服务

export class JobsDetailComponent implements OnInit {
constructor(
    private jobService: JobService){}


ngOnInit(): void {
    console.log("ip");
    this.jobService.getIpAddress().subscribe(data => {
      console.log(data);
    });

}

当我调用此服务但它没有按预期工作并在浏览器控制台中显示错误.

无法加载http://freegeoip.net/json/?callback:对预检请求的响应未通过访问控制检查:请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:4200 '访问

我该如何解决这个问题？

这个url可以在ajax JavaScript中工作,但在Angular中不起作用

$.getJSON('//freegeoip.net/json/?callback=?', function (data) {
       return JSON.stringify(data, null, 2);
     });

Answer 1

如果删除{ headers: headers }参数,它将起作用.