I am trying to display content from json online on my HTML. It works fine on my laptop but on my phone browser (chrome) and my friends (opera) it doesn't work. I've checked the compatibility with it and it should be fine?
Heres my HTML that I'm using:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="15" >
<title>Alton Towers Predicted Queue Times</title>
</head>
<body>
<script>
fetch("https://queue-times.com/parks/1/queue_times.json")
.then(response => response.json())
.then(data => {document.querySelector("#name").innerText = data.lands[0].rides[0].name});
</script>
<h3><span id="name"></span></h3>
</body>
</html>Any idea why this works on my laptop but not my phone?
Apparently the problem is a CORS issue. Since this is a third-party site that you do not have access to, you will need to implement a small server-side code that will receive a request, send its equivalent to the actual target, receive the target's response and send that back to the browser. For your small server-side code, that will act as a proxy you can easily set the appropriate CORS headers so you will be able to perform the requests.