如何在HTML中通过SourceForge API展示工具总下载量？

你遇到的核心问题是浏览器的跨域资源共享（CORS）限制——本地文件运行时用的是file://协议，浏览器对这种场景的跨域检查比较宽松，但当你把代码部署到常规的HTTP/HTTPS服务器上时，浏览器会严格限制前端JS直接请求不同域名的API，所以才会出现本地能跑、外部数据源拿不到的情况。

下面给你两个可行的解决方案，按推荐程度排序：

方案1：后端代理（最稳定可靠） #

通过自己搭建一个简单的后端接口，让后端去请求SourceForge的API，再把你需要的总下载量返回给前端。这样就绕开了前端跨域的问题。

举个Node.js + Express的代理示例：

// 先安装依赖：npm install express axios
const express = require('express');
const axios = require('axios');
const app = express();

// 自定义代理接口
app.get('/fetch-downloads', async (req, res) => {
  try {
    const sfApiUrl = 'https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19';
    const sfResponse = await axios.get(sfApiUrl);
    // 这里要根据SourceForge返回的JSON结构，替换成实际的总下载量字段
    // 你可以先在浏览器打开API地址，查看返回的JSON找到对应字段，比如可能是total_downloads
    const total = sfResponse.data.total;
    res.json({ totalDownloads: total });
  } catch (err) {
    res.status(500).json({ error: 'Failed to get download data' });
  }
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

然后前端HTML请求这个代理接口：

<html>
<head>
  <title>Total Downloads</title>
  <script>
    window.addEventListener('load', () => {
      // 请求自己的代理接口
      fetch('http://localhost:3000/fetch-downloads')
        .then(res => res.json())
        .then(data => {
          document.getElementById('count').textContent = `Total Downloads: ${data.totalDownloads}`;
        })
        .catch(err => console.error('Error loading data:', err));
    });
  </script>
</head>
<body>
  <div id="count">Loading download count...</div>
</body>
</html>

方案2：尝试JSONP（仅当API支持时可用） #

有些开放API支持JSONP来绕过跨域，你可以试试给SourceForge的API地址加上callback参数，指定一个前端回调函数：

<html>
<head>
  <title>Total Downloads</title>
  <script>
    // 定义回调函数，接收API返回的数据
    function processDownloadData(data) {
      // 同样要替换成实际的总下载量字段
      const total = data.total;
      document.getElementById('count').textContent = `Total Downloads: ${total}`;
    }
  </script>
  <!-- 引入带callback参数的API脚本 -->
  <script src="https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19&callback=processDownloadData"></script>
</head>
<body>
  <div id="count">Loading...</div>
</body>
</html>

注意：如果SourceForge的这个API不支持JSONP，这种方法就会失效，所以优先推荐后端代理方案。

小提示 #

一定要先在浏览器中打开SourceForge的API地址，查看返回的JSON结构，确认总下载量对应的字段名（比如可能是total、total_downloads或者其他），再在代码中对应修改，不然会拿不到正确的数据。

内容的提问来源于stack exchange，提问作者Rawstring