调用 BBK API 实现版本显示

补充：向「通义千问」提问 (未加盘古之白)

假设你是一名HTML工程师。现有如下HTML代码：

...
<div id="versionInfo"></div>
...
<script>
document.addEventListener('DOMContentLoaded', function() {
    const url = 'http://bbk.endyun.ltd:9000/api/last_version';
    const data = { b: 0 };

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams(data),
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        const versionAll = data.message[0].version_all;
        document.getElementById('versionInfo').textContent = `Version All: ${versionAll}`;
    })
    .catch(error => {
        console.error('Fetch failed:', error);
        document.getElementById('versionInfo').textContent = `Error: ${error.message}`;
    });
});
</script>

如果使用CURL执行近似的API调用，命令是：

curl -s -H "Content-Type: application/x-www-form-urlencoded" -d "b=0" http://bbk.endyun.ltd:9000/api/last_version

返回是：

{"status":200,"message":[{"version_all":"1.21.2.02","version":"1.21.2","is_beta":0,"update_time":"2024-07-08T16:00:00.000Z","file_size":"840.21MB/849.53MB","link":"{\"123盘\": {\"ARMv7\": \"https://www.123pan.com/s/dhm9-4ku0A.html\", \"ARMv8\": \"https://www.123pan.com/s/dhm9-Iku0A.html\"}, \"OneDrive_E5\": {\"ARMv7\": \"https://bbk.endyun.ltd/s/1-21-2-02v7\", \"ARMv8\": \"https://bbk.endyun.ltd/s/1-21-2-02v8\"}, \"OneDrive_365\": {\"ARMv7\": \"https://bbk.endyun.ltd/od/1.21.2\", \"ARMv8\": \"https://bbk.endyun.ltd/od/1.21.2\"}}"}]}

现已知上述HTML代码返回为Error: NetworkError when attempting to fetch resource.，请debug上述HTML代码。

根据提供的信息，我们看到HTML中的脚本尝试通过fetch API从服务器获取数据，并且在请求失败时显示了一个错误消息：“Error: NetworkError when attempting to fetch resource.” 这个错误通常意味着网络请求没有成功完成。

首先，我们需要检查几个可能的问题点：

请求的URL是否正确？
请求方法、头部和body是否符合服务器的要求？
服务器是否能够响应？

让我们逐一排查这些可能性。

1. 请求的URL是否正确？

URL是http://bbk.endyun.ltd:9000/api/last_version，看起来格式正确。

2. 请求方法、头部和body是否符合服务器的要求？

方法是POST，这与CURL命令一致。
头部Content-Type: application/x-www-form-urlencoded也是正确的。
Body使用new URLSearchParams(data)发送，这应该没问题。

3. 服务器是否能够响应？

给定的CURL命令似乎能够成功执行并返回预期的结果。这意味着服务器应该可以响应。

既然CURL命令能够成功获取数据，那么问题很可能出现在浏览器端。接下来，我们可以检查以下几点：

跨域资源共享（CORS）：由于CURL是在命令行中执行的，它不受浏览器的同源策略限制。而浏览器会执行CORS检查来确保安全。如果服务器没有正确设置CORS头，那么浏览器可能会阻止这个请求。
服务器状态：虽然CURL命令成功了，但有可能服务器对浏览器请求进行了不同的处理。
网络连接：尽管不太可能，但仍需确认网络连接正常。

为了进一步调试这个问题，你可以采取以下步骤：

检查浏览器控制台：查看是否有任何其他错误或警告。
使用开发者工具：在浏览器中打开开发者工具，检查Network标签页以查看具体发生了什么错误。
检查服务器响应：如果可能的话，检查服务器的日志或者使用工具如Wireshark抓包查看服务器实际接收到了什么样的请求以及它如何响应。
修改请求方式：尝试将请求方式改为GET，看是否能够解决问题。

对于CORS问题，你可以在服务器端添加以下响应头以允许所有来源的请求：

Access-Control-Allow-Origin: *

如果只是测试目的，可以暂时使用这种方式解决。但在生产环境中，最好指定一个具体的域名列表以提高安全性。

如果以上方法都不能解决问题，那么可能需要联系服务器管理员或开发团队来确认服务器配置是否正确支持CORS。

PumpkinJui / groupdocs