CODEWITHSUNDEEP
ajaxangularcross-domain
Mohammad Daliri
Mohammad Daliri

Reputation: 1406

Get ip address in Angular 5

I want to get client ip Address in Angular 5 from http://freegeoip.net/json/?callback
I have a service 

@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);
      }
}

and call service in jobcomponent

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


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

}

when I am calling this service but it is not working as expected and showing error in the browser console.

Failed to load http://freegeoip.net/json/?callback: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access

How can i solve this issue ?

This url can work in ajax JavaScript , but in Angular doesn't work 

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

Upvotes: 1

Views: 13490

Answers (1)

VahidN
VahidN

Reputation: 19176

It will work if you remove the { headers: headers } parameter.

Upvotes: 7

Related Questions