【发布时间】：2021-11-28 14:39:13
【问题描述】：
我希望将数据从多个 Google 表格传输到 Webflow 上的网站。表格中的数据会随着时间的推移而更新（有些是自动的，有些是手动的），我们的网站需要随之动态更新。直到几周前，我们才开始进行这项工作。我们使用了表格的“发布到网络”功能，然后通过 xmlhttp 请求简单地从该页面抓取。
然后，谷歌改变了他们的系统。我们使用的旧链接已替换为以下页面：
Sheets v3 API 已被拒绝。更多信息请访问：https://cloud.google.com/blog/products/g-suite/migrate-your-apps-use-latest-sheets-api
使用 v4，您仍然可以发布到 Web，但它会输出不同的链接，当我们尝试使用 xmlhttp 调用请求它时，这会导致 CORS 问题。我们不断收到此错误：
访问 XMLHttpRequest 在 'https://docs.google.com/spreadsheets/u/2/d/e/2PACX-1vTkGAWMFigGt-_40bYYtR9OuDh5t0gO0B5tAUhiUg2-XuSXfIazjgbvoqBxvQxxIPr62OfmdWQaWtPt/pubhtml' CORS 策略已阻止来自原点“null”：响应 预检请求未通过访问控制检查：重定向未通过 允许预检请求。
我不知道该怎么做，但在研究过程中，我发现 Google 似乎一开始就不希望人们从这个发布页面获取信息——它的本意是发送给他人的链接。
我们目前还不确定该怎么做，需要一些帮助。是否有我们不知道的变通方法，或者我们可以完全使用不同的系统？
代码：
let fonds_xmlhttp = new XMLHttpRequest();
fonds_xmlhttp.onload = function () {
if (this.readyState == 4 && this.status == 200){
let fonds_data = JSON.parse(this.responseText);
// do stuff with fonds_data
} else {
console.log("status: " + this.status);
}
};
fonds_xmlhttp.open("GET",
"https://docs.google.com/spreadsheets/u/2/d/e/2PACX-1vTkGAWMFigGt-_40bYYtR9OuDh5t0gO0B5tAUhiUg2-XuSXfIazjgbvoqBxvQxxIPr62OfmdWQaWtPt/pubhtml",
true);
编辑：
这是我现在使用的流程...我只是想在 chrome 中打开这个 html 页面，现在使用@Tanaike 提供的脚本：
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div>
<table class="fonds-tabelle">
<thead>
<tr>
<th> </th>
<th>2021</th>
<th>2020</th>
<th>2019</th>
<th>2018</th>
<th>2017</th>
<th>2016</th>
<th>Ø 3J</th>
<th>Ø 5J</th>
</tr>
</thead>
<tbody id="fonds-daten">
</tbody>
</table>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<script type="text/javascript">
let fonds_xmlhttp = new XMLHttpRequest();
fonds_xmlhttp.onload = function () {
if (this.readyState == 4 && this.status == 200){
let [header, ...values] = Papa.parse(this.responseText).data;
values = values.map(r => r.map(c => {
const t = c.trim();
return isNaN(t) ? t : Number(t);
}));
const fonds_data = values.map(r => r.reduce((o, c, j) => Object.assign(o, {[header[j] && header[j].trim()]: c}), {}));
console.log(fonds_data);
/* Then iterate over fonds_data and fill the tbody fonds-daten with it */
} else {
console.log("status: " + this.status);
}
};
const url = "https://docs.google.com/spreadsheets/u/2/d/e/2PACX-1vTkGAWMFigGt-_40bYYtR9OuDh5t0gO0B5tAUhiUg2-XuSXfIazjgbvoqBxvQxxIPr62OfmdWQaWtPt/pub?output=csv";
fonds_xmlhttp.open("GET", url, true);
fonds_xmlhttp.send();
</script>
当我在 Chrome 中打开它时，我仍然收到以下 CORS 错误：
从源“null”访问“https://docs.google.com/spreadsheets/u/2/d/e/2PACX-1vTkGAWMFigGt-_40bYYtR9OuDh5t0gO0B5tAUhiUg2-XuSXfIazjgbvoqBxvQxxIPr62OfmdWQaWtPt/pub?output=csv”的 XMLHttpRequest 已被阻止根据 CORS 策略：请求的资源上不存在“Access-Control-Allow-Origin”标头。
【问题讨论】：
标签： javascript google-sheets xmlhttprequest webflow