Issue when fetching card information from device

Question

0.00/5 (No votes)

See more:

Hi
I have an issue when fetching card information from device in windows 11 browser(Chrome, Firefox) but it is working fine in Windows 10
Error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1/MyKAD/GetMyKAD?LoadPhoto=NO&VerifyFP=NO&Format=JSON. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match

I am using VS 2022 and backend is MSSQL 2019. I am using localhost/vms and using CORS.

Pls advice me.
Thank you
Maideen

What I have tried:

I am using this to fetch data from Card on Both windows 10 and window 11. But failed in windows 11.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
	xmlhttp=null;
	if (window.XMLHttpRequest)
	{// code for IE7, Firefox, Opera, etc.
		xmlhttp=new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (xmlhttp!=null)
	{
		xmlhttp.onreadystatechange=state_Change;
		xmlhttp.open("GET",url,true);
		xmlhttp.send(null);
	}
	else
	{
		alert("Your browser does not support XMLHTTP.");
	}
}
function loadMyKAD(fmt)
{
	var url = "";
	if (fmt == "XML") {
		url = document.getElementById("idURIXML").value;
	}
	else if (fmt == "JSON") {
		url = document.getElementById("idURIJSON").value;
	}
	loadXMLDoc(url);
}
function state_Change()
{
	if (xmlhttp.readyState==4) {// 4 = "loaded"
		if (xmlhttp.status==200) {// 200 = "OK"
			document.getElementById('A1').innerHTML=xmlhttp.status;
			document.getElementById('A2').innerHTML=xmlhttp.statusText;
//			document.getElementById('A3').innerHTML=xmlhttp.responseText;

				document.getElementById("A3").innerHTML =
					//"Response:<br>" +
					"<textarea rows=\"8\" cols=\"120\" style=\"border:none;\">" +
					xmlhttp.responseText +
					"</textarea>";
			alert(xmlhttp.responseText);
		}
		else {
			alert("Problem retrieving XML data:" + xmlhttp.statusText);
		}
	}
}
    </script>

</head>
<body>
	<h2>Consume MyKAD Host Web Service Using the HttpRequest Object</h2>

	<p>
		Status:
		<span id="A1"></span>
	</p>

	<p>
		Status text:
		<span id="A2"></span>
	</p>

	<p>
		Response:
		<br /><span id="A3"></span>
	</p>
	<input id="idURIXML" name="URIXML" value="" Style="Width: 60%">
	<button onclick="loadMyKAD('XML')">Get XML</button><br>
	<input id="idURIJSON" name="URIJSON" value="" Style="Width: 60%">
	<button onclick="loadMyKAD('JSON')">Get JSON</button><br>
	<script>
		document.getElementById("idURIXML").value = "http://127.0.0.1/MyKAD/GetMyKAD?LoadPhoto=NO&VerifyFP=NO&Format=XML";
		document.getElementById("idURIJSON").value = "http://127.0.0.1/MyKAD/GetMyKAD?LoadPhoto=NO&VerifyFP=NO&Format=JSON";
	</script>
</body>
</html>

Posted 28-Aug-24 19:11pm

Maideen Abdul Kader

Updated 28-Aug-24 19:27pm

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2024-08-28T21:34:00

Quote:
CORS header 'Access-Control-Allow-Origin' does not match

You haven't shown any of the CORS headers returned by your site, nor the code that sets them. But the error message is perfectly clear: the headers returned do not match the calling site.

You need to check the URL of the calling site, and the headers returned from the remote site. Use your browser's developer tools in the "network" tab to see the request and response information.

Issue when fetching card information from device

1 solution

Solution 1

Add your solution here

Preview 0

Issue when fetching card information from device

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us