1

How to get Client IP address in Angular JS using external APIs? I always get response as "" ? The browser I am using is BRAVE

I need to get client API from Angular frontend and send it back to Backend(SPRINGBOOT). I tried many external APIs but I am getting "" as response data. How to get response in AngularJS? I am using the below code to get API response.

I tried http://jsonip.com?callback=? . It works well in browser and postman, but while I try console.log(response.data) the output is ""

$http.get("randomeOnlineAPI").then(handleSuccess, handleRemoteError);

I need to get API response and then send back the received ip to backend.

Community
  • 1
  • 1
Gautham Padmanabhan
  • 27
  • 6

1 Answers1

0

For JSONP APIs, use:1

 var url = "//api.ipify.org/";
 var trust = $sce.trustAsResourceUrl(url);
 $http.jsonp(trust,{params: {format:'jsonp'}})
   .then(function(response) {
     console.log(response);
     $scope.response = response.data;
 }).catch(function(response) {
     console.log(response);
     $scope.response = 'ERROR: ' + response.status;
 })

The DEMO on PLNKR

For more information, see

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • I found another workaround, I tried hitting the api using this https://cors-anywhere.herokuapp.com/API-YOU-WANT eg: I used $http.get('https://cors-anywhere.herokuapp.com/http://api.ipify.org/?format=text'); – Gautham Padmanabhan Oct 10 '19 at 12:48
  • I tried jsonp , but still it is blocked by Cross Orgin Read Blocking with MIME type application/json. – Gautham Padmanabhan Oct 10 '19 at 12:53
  • The example in the question showed an API that supports JSONP. If the API doesn't support JSONP and it doesn't allow Cross-Origin Resource Sharing, then the only choice is to access it from your own server or a proxy. Browsers block cross-origin requests from JavaScript to protect users from evil JavaScript. – georgeawg Oct 10 '19 at 15:02