从Google Spreadsheet获取数据至Google Charts时出现错误

问题分析 #

从报错信息来看，核心是两个关键问题：

• 跨域资源共享（CORS）限制：本地直接打开HTML文件使用file://协议，不符合Google Sheets API的跨域访问规则，被浏览器拦截。
• Google Sheets权限未公开：你的表格文档可能设置为私有状态，外部请求无法读取数据。

解决方案步骤 #

1. 配置Google Sheets文档权限 #

打开目标Google Sheets文档：

• 点击右上角「共享」按钮。
• 切换权限设置为**「知道链接的任何人」可查看**（仅需授予「查看者」权限即可），保存更改。

2. 用本地服务器运行HTML文件 #

直接打开本地HTML的file://协议会触发跨域拦截，必须通过HTTP服务器访问：

• Node.js方案：

  # 全局安装http-server工具
  npm install -g http-server
  # 进入HTML所在目录启动服务器
  http-server
  

  访问终端输出的http://localhost:8080（或对应端口）打开HTML文件。
• Python方案：

  # Python 3
  python -m http.server
  # Python 2
  python -m SimpleHTTPServer
  

  访问http://localhost:8000打开文件。

3. 验证查询链接有效性 #

直接在浏览器中打开你的查询链接：

https://docs.google.com/spreadsheets/d/1wi2ZfL8_G7gNPGmNpQ347QVEICddJ3Jsmye5k8MvIHY/gviz/tq?gid=0

如果返回JSON格式的数据，说明权限配置正确；如果显示「拒绝访问」，回到步骤1重新调整权限。

4. 可选：添加自定义查询规则 #

如果需要筛选Sheet数据，可在链接后追加查询参数，比如只读取前10行数据：

var query = new google.visualization.Query(
  'https://docs.google.com/spreadsheets/d/1wi2ZfL8_G7gNPGmNpQ347QVEICddJ3Jsmye5k8MvIHY/gviz/tq?gid=0&tq=SELECT * LIMIT 10'
);

完成以上步骤后，重新通过本地服务器访问HTML文件，即可正常加载Google Charts图表。

内容的提问来源于stack exchange，提问作者Théo Neubeck