<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function fetchData(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var jsonObj = JSON.parse(xhttp.response);
document.getElementById('result').innerHTML = jsonObj.name;
}
};
xhttp.open("GET", "student.json", true);
xhttp.send();
}
</script>
<input type="button" name="name" onclick="fetchData()" value="Click"/>
<div id="result"></div>
</body>
</html>
I encountered an issue with the following error message: 6hp.html:21 Access to XMLHttpRequest at 'file:///C:/Users/Admin/Desktop/ind/ip-simple/student.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.