使用HTML+JavaScript的Fetch API获取Sponsorkliks API数据失败求助

首先，打开浏览器开发者工具（按F12）切换到「控制台」标签，查看具体错误信息，这是定位问题的核心步骤。常见失败原因及对应解决方法如下：

1. 跨域资源共享（CORS）限制 #

这是最可能的触发原因：浏览器的同源策略会阻止前端页面直接从不同域名的API获取数据。你的页面域名（比如本地file:///协议或自有服务器）与sponsorkliks.com不属于同一域名，因此请求会被拦截。

解决方法： #

• 开发阶段临时调试：安装浏览器CORS扩展（如Chrome的「Allow CORS: Access-Control-Allow-Origin」），开启后可临时绕过跨域限制，用于验证API是否能正常返回数据。
• 正式环境使用后端代理：搭建简单后端服务，由后端调用目标API，前端再请求自有后端接口（同源），彻底避免跨域问题。

示例Node.js代理服务（需先执行npm install express node-fetch安装依赖）：

// server.js
const express = require('express');
const fetch = require('node-fetch');
const app = express();

app.get('/proxy-api', async (req, res) => {
  try {
    const apiRes = await fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension');
    const data = await apiRes.json();
    res.json(data);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.listen(3000, () => console.log('代理服务运行在 http://localhost:3000'));

前端代码修改为请求代理接口：

fetch('http://localhost:3000/proxy-api')
  .then(res => res.json())
  .then(data => {
    const tableBody = document.querySelector('#api-table tbody');
    data.forEach(item => {
      const row = document.createElement('tr');
      // 原有表格渲染逻辑保持不变
      const nameCell = document.createElement('td');
      nameCell.textContent = item.name;
      row.appendChild(nameCell);
      const urlCell = document.createElement('td');
      const urlLink = document.createElement('a');
      urlLink.href = item.url;
      urlLink.textContent = item.url;
      urlCell.appendChild(urlLink);
      row.appendChild(urlCell);
      const logoCell = document.createElement('td');
      const logoImg = document.createElement('img');
      logoImg.src = item.logo;
      logoImg.alt = item.name;
      logoImg.style.maxWidth = '100px';
      logoCell.appendChild(logoImg);
      row.appendChild(logoCell);
      tableBody.appendChild(row);
    });
  })
  .catch(err => console.error('请求失败:', err));

2. API响应格式错误 #

如果控制台提示「Unexpected token...」类的JSON解析错误，说明API返回的不是标准JSON格式。可以先打印响应文本排查：

fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
  .then(res => res.text())
  .then(text => console.log('API返回内容:', text))
  .catch(err => console.error(err));

若返回HTML（如错误页面），说明API调用参数有误或权限不足，需核对club、call参数是否正确，或确认是否需要额外认证信息。

3. API权限验证 #

若控制台返回403/401状态码，说明API需要携带认证头（如Authorization）或密钥参数才能访问。建议查阅该API的官方文档，确认调用规则与必填认证信息。

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