Jinu in Javascript
Failed to load : No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin is therefore not allowed access.
In this video I have shown how you can over come the error,
Failed to load : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access.
This error is because of Cross-Origin Resource Sharing (CORS) issue. This simply means that you are trying access information from other domain which is actually not permitted because of cross domain security issue.
I have shown in the video a real time example how I faced this error and how to overcome.
In the video I have explained 2 ways to over come this,
1 . Use JSONP instead of JSON on requesting data from other domain.
The below program code shows how you can use JSONP to overcome CORS issue,
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(e){
e.preventDefault();
var ip_address=$("#ip_address").val();
$.ajax({
type: "GET",
url: "http://api.ipinfodb.com/v3/ip-city",
data: {
key:"9d64fcfdfacc213c7ddf4ef911dfe97b55e4696be3532bf832876c09bad06b",
ip:ip_address,
format:"json"
},
dataType: "jsonp",
jsonpCallback: "jsonp_callback",
crossDomain: true,
success: function(result) {
alert(result);
},
error: function(result) {
alert('error');
}
});
});
});
function jsonp_callback(json){
alert(json.cityName);
}
</script>
</head>
<body>
<center>
<h1>Jquery Get Request Test</h1>
<form>
IP Address : <input type="text" id="ip_address"/><br>
<button>Submit</button>
</for>
</center>
</body>
</html>
Download the jquery.min.js here jquery.min
2 . Use Javascript instead of Jquery.
The above code functionality can be implemented using only javascript. The use of javascript only can also help to overcome the CORS issue. The javascript code for getting request is,
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
document.getElementById("Save").onclick = function fun() {
var x = document.forms["myForm"]["ip_address"].value;
var Url = "http://api.ipinfodb.com/v3/ip-city/?key=9d64fcfdfacc213c7ddf4ef911dfe97b55e4696be3532bf8302876c09ead06b&format=json&ip=" +x;
var xhr = new XMLHttpRequest();
xhr.open('GET', Url, true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
// alert(xhr.responseText);
var response1 = JSON.parse(xhr.responseText);
document.getElementById("statusCode").innerHTML = response1.name + ", " + response1.statusCode;
document.getElementById("statusCode").innerHTML = response1.statusCode;
document.getElementById("statusMessage").innerHTML = response1.statusMessage;
document.getElementById("ipAddress").innerHTML = response1.ipAddress;
document.getElementById("countryCode").innerHTML = response1.countryCode;
document.getElementById("countryName").innerHTML = response1.countryName;
document.getElementById("regionName").innerHTML = response1.regionName;
document.getElementById("cityName").innerHTML = response1.cityName;
document.getElementById("zipCode").innerHTML = response1.zipCode;
document.getElementById("latitude").innerHTML = response1.latitude;
document.getElementById("longitude").innerHTML = response1.longitude;
document.getElementById("timeZone").innerHTML = response1.timeZone;
}
}
}
}
</script>
</head>
<body>
<center>
Javascript Get Request Test From Form
<br> <br>
<form name="myForm">
<input type="text" name="ip_address"/>
<input type="button" id="Save" onclick="f1()" value="test"/>
</form>
<center>
<br> <br>
<table border="1">
<tr><td>statusCode :</td><td id="statusCode"></td></tr>
<tr><td>statusMessage :</td><td id="statusMessage"></td></tr>
<tr><td>ipAddress :</td><td id="ipAddress"></td></tr>
<tr><td>countryCode :</td><td id="countryCode"></td></tr>
<tr><td>countryName :</td><td id="countryName"></td></tr>
<tr><td>regionName :</td><td id="regionName"></td></tr>
<tr><td>cityName :</td><td id="cityName"></td></tr>
<tr><td>zipCode :</td><td id="zipCode"></td></tr>
<tr><td>latitude :</td><td id="latitude"></td></tr>
<tr><td>longitude :</td><td id="longitude"></td></tr>
<tr><td>timeZone :</td><td id="timeZone"></td></tr>
</table>
</body>
</html>
0 Comments
Comments
Comments are disabled for this post