Search code examples
angularip-addressangular-httpclient

Why do I get the IP Address in my Angular 13 application using api.ipify.org in development but not in the production environment?

The goal:

I'm trying to get the ip address by using the get method from angular's HttpClientModule so I can inject it to a form so I can send the IP from my Angular 13 application to my API.

The problem:

The issue I'm facing right now is that if I make a call to the url https://api.ipify.org?format=json from my production environment the request fails to load and I'm getting the following error in my browser console (Brave Browser):

GET https://api.ipify.org/?format=json net::ERR_BLOCKED_BY_CLIENT

enter image description here

Weird is that the request does load in my development environment (localhost) with the expected result and the ip address is responded with a json from ipfy. But as mentioned under the production environment I'm getting the error above and I really can't figure out why/how this is happening.

Show some code:

I currently have the following service which I would inject to a component to read the ip address from the response:

// ip.service.ts | A service class to get the ip address of the current visitor
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class IpService {

  constructor(private http:HttpClient) { } 

  public GetIp() : Observable<IpResponseDTO> {
    return this.http.get<IpResponseDTO>("https://api.ipify.org?format=json");  
  }

}
export interface IpResponseDTO{
  ip : string
}

As mentioned this works fine on localhost but not on the public domain.

What I've already tried:

  • Tried using different urls from various ip apis but none of them worked.

  • Tried searching on google on this particular issue but I only found an ocean of tutorial pages on how to use ipfy in an angular application more or less the same way as I'm doing now but nothing that summarizes all three topics "Angular", "ipfy.org" and "net::ERR_BLOCKED_BY_CLIENT".

  • I also tried to load the page with the form in other browsers like Edge, Firefox and Chrome but unfortunately always with the same results.

Question:

  • Would I want to add something to the headers in order to get this working?
  • Or is it something else that I'm not aware of?

Any help on this is very much appreciated! 🙏🏻

Solution

  • As it seemed my Adblockers were the cause of the issue... Disabling the Adblockers in all the browsers seemed to do the trick and the ip address got loaded as expected.

    Edit I will accept this answer as the answer 11.06.2022