求助：排查Google Sheets API Key实现网页电竞排行榜失效问题

问题说明 #

正在制作大学项目的电竞排行榜系统，计划通过JavaScript结合Google Sheets实现网页动态展示排行榜数据。已填入API Key、表格ID并指定数据范围，但网页始终无法显示数据，且仅限前端代码实现，需排查解决。

现有代码 #

HTML代码 #

<!-- HTML for Leaderboard -->
<div id="leaderboard">
  <h2>Esports Leaderboard</h2>
  <ul id="leaderboard-list">
    <script src="js/leaderboard.js"></script>
    <!-- Leaderboard items will be inserted here dynamically using JavaScript -->
  </ul>
</div>

注：通过空<ul>配合CSS样式，期望脚本动态插入数据。

CSS代码 #

#leaderboard {
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

#leaderboard h2 {
  text-align: center;
}

#leaderboard ul {
  list-style-type: none;
  padding: 0;
}

#leaderboard li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

#leaderboard li:nth-child(even) {
  background-color: #f9f9f9;
}

#leaderboard .username {
  flex-grow: 1;
}

JavaScript代码 #

// Function to load Google Sheets API
function loadSheetsAPI() {
  gapi.load('client', function() {
    gapi.client.init({
      'apiKey': 'key'
    }).then(function() {
      fetchData();
    }).catch(function(error) {
      console.error('Error initializing Google Sheets API:', error);
    });
  });
}

// Load Google Sheets API with a delay
setTimeout(loadSheetsAPI, 1000); // Adjust the delay time as needed (in milliseconds)


// Function to fetch data from Google Sheets
function fetchData() {
  if (!gapi.client.sheets) {
    console.error('Google Sheets API is not loaded or initialized.');
    return;
  }

  gapi.client.sheets.spreadsheets.values.get({
    spreadsheetId: '1HWGVLLX1ugAewLUMAyLxImHo_qeBzam5-Z8RzBpxVBI',
    range: 'Sheet1!A1:C21' // Change this to match the range you want to fetch
  }).then(function(response) {
    var range = response.result;
    if (range.values && range.values.length > 0) {
      displayData(range.values);
    } else {
      console.log('No data found in the specified range.');
    }
  }).catch(function(error) {
    console.error('Error fetching data from Google Sheets:', error);
  });
}

// Function to display data in HTML
function displayData(data) {
  var leaderboardDiv = document.getElementById('leaderboard');
  var leaderboardList = document.getElementById('leaderboard-list');

  leaderboardDiv.innerHTML = '<h2>Leaderboard</h2>';
  leaderboardList.innerHTML = '';

  for (var i = 0; i < data.length; i++) {
    var listItem = document.createElement('li');
    listItem.textContent = data[i].join(' | ');
    leaderboardList.appendChild(listItem);
  }
}

// Load Google Sheets API
loadSheetsAPI();

排查与解决方案 #

1. 确认Google Sheets API已启用 #

登录Google Cloud控制台，找到你的项目，搜索Google Sheets API，确保状态为“已启用”。若未启用，点击“启用”按钮。

2. 验证API Key配置 #

• 检查API Key的权限：确保该Key允许调用Google Sheets API，无禁用限制；
• 本地测试时，调整API Key的HTTP referrer限制：可暂时设置为*（允许所有来源），或添加localhost:端口号到允许列表；
• 替换代码中的'key'为你实际的有效API Key。

3. 调整Google Sheets共享权限 #

打开目标Google Sheets表格，点击右上角“共享”按钮，设置权限为**“任何人拥有链接都可查看”**并保存。前端无OAuth授权，只能访问公开可查看的表格数据。

4. 修正JavaScript代码问题 #

核心初始化错误

原代码未指定discoveryDocs，导致gapi.client.sheets无法加载。修改loadSheetsAPI函数：

function loadSheetsAPI() {
  gapi.load('client', function() {
    gapi.client.init({
      apiKey: '你的API_KEY',
      // 添加discoveryDocs参数，指定Sheets API的文档地址
      discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"]
    }).then(function() {
      fetchData();
    }).catch(function(error) {
      console.error('Error initializing Google Sheets API:', error);
    });
  });
}

移除重复初始化调用

原代码同时调用了loadSheetsAPI()和setTimeout(loadSheetsAPI, 1000)，会导致重复初始化，删除其中一行（建议删除setTimeout那行，避免不必要的延迟）。

修复HTML转义错误

displayData函数中，leaderboardDiv.innerHTML使用了转义字符，导致无法渲染HTML标签，修改为：

leaderboardDiv.innerHTML = '<h2>Leaderboard</h2>';

调整脚本加载位置

将<script src="js/leaderboard.js"></script>从<ul>内部移到<body>标签末尾，确保DOM完全加载后再执行脚本：

<div id="leaderboard">
  <h2>Esports Leaderboard</h2>
  <ul id="leaderboard-list"></ul>
</div>

<script src="js/leaderboard.js"></script>

5. 调试排查 #

• 打开浏览器开发者工具（F12），切换到Console标签，查看是否有错误提示；
• 切换到Network标签，过滤XHR请求，查看Google Sheets API的请求状态：
  • 403错误：通常是API未启用、API Key权限不足或表格未公开；
  • 404错误：检查表格ID或数据范围是否正确；
  • 200状态但无数据：确认表格指定范围内有内容。

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