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 }参数，它将起作用。

获取Angular 5中的IP地址

1 个答案: