I have to write a program where I need to fetch and display public IP of the client machine (windows) on the screen. For this I have this website (https://api.myip.com/) which provides the IP of the machine from where it is invoked. I am using JQuery/Ajax method to hit the URL (https://api.myip.com/) and capture the response.
Below is my code in index.js
$("#action-button1").click(function() {
$.ajax({
url: 'https://api.myip.com',
data: {
format: 'json'
},
error: function() {
$('#info').html('<p>An error has occurred</p>');
},
dataType: 'jsonp',
success: function(data) {
var $ip = $('<h1>').text(data);
$('#info')
.append($ip)
},
type: 'GET'
});
});
Now the issue is that when my above code runs, I see an error in Browser console. “Cross-Origin Read Blocking (CORB) blocked cross-origin response”. So I read further on internet and I see that suggestions are to add headers in response from server i.e. the server which hosts https://api.myip.com should send certain response headers to allow request from my code.
Now my question is what can be done from my code end to hit the URL https://api.myip.com successfully as I cannot make any change on server end.
PS: I am using spring boot to host my html and js file.
Edit1: If I keep dataType: 'jsonp' then I see warning on the browser console and if I change it to json then it shows red colored error of CORS.