Javascript Fetch not working on mobile devices

user_17349286 0
Viewed 816

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?

fetch-api html javascript
1 Answers

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.

user_4365600
Related