Javascript Fetch 在移动设备上不起作用答案

【问题标题】：Javascript Fetch not working on mobile devicesJavascript Fetch 在移动设备上不起作用
【发布时间】：2021-12-20 14:53:21
【问题描述】：

我正在尝试在我的 HTML 上在线显示来自 json 的内容。它在我的笔记本电脑上运行良好，但在我的手机浏览器（chrome）和我的朋友（opera）上它不起作用。我用它检查了compatibility，应该没问题吧？

这是我正在使用的 HTML：

<!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>

知道为什么这适用于我的笔记本电脑而不是我的手机吗？

【问题讨论】：

您是否尝试过在问题中运行您的 sn-p？它如何在浏览器上不起作用？运行脚本时我看到一个空白屏幕。
“不工作”是指它是一个空白屏幕。经过更多测试后，我发现：Chrome (PC)，工作 - Firefox (PC)，不工作，Safari (iOS)，不工作 - Chrome (Android)，不工作；工作。
哦，我想我知道为什么它不起作用了。我的笔记本电脑上有一个 cors bypasser 扩展。这就是为什么它可以在那里工作，但不能在其他任何地方工作。
明白。由于您无权访问您请求的 API 代码，因此您需要在您的请求和目标之间插入一个代理，并为您的代理分配适当的 CORS 标头。

标签： javascript html fetch-api

【解决方案1】：

显然问题是 CORS 问题。由于这是您无权访问的第三方站点，因此您需要实现一个小的服务器端代码，该代码将接收请求，发送与实际目标等效的请求，接收目标的响应并将其发送回浏览器。对于您的小型服务器端代码，它将充当代理，您可以轻松设置适当的 CORS 标头，以便您能够执行请求。

【讨论】：

我使用了第三方 cors 代理并添加了适当的标头。它在我的笔记本电脑上运行良好，但是当我从手机查看控制台时（不起作用），我收到此错误“（索引）：9 GET cors-anywhere.herokuapp.com/https://queue-times.com/parks/1/… 403（禁止）”。此错误仅在通过我的手机请求站点时显示。