Question

我已经写了一小段JS来将数字输入到我网站上的HTML中。它在我本地运行文件时有效，但是当我将它上传到我的主机Lithium时，我的D3代码就抛出了这个错误：

XMLHttpRequest无法加载https://docs.google.com/spreadsheets/d/12jMwpmqdbUUfcMHWg2GwGvu-d9BhaJOEsWjK1eoqHRc/pub?output=csv。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; https://alanhovorka.com＆＃39;因此不允许访问。

我已经在这里阅读了一些答案，但是当D3从以Google发布到网络的Google表格中提取数据时，它们似乎并没有直接解决。我已经看到关于CORS是否与D3一起使用以及是否需要使用桌面的混合反应。我对CORS的了解有限，但似乎它是最简单的解决方案。此外，我从来没有能够让桌面工作，而且我已经阅读了对其长期生存能力的担忧。

这是我的JS与电子表格调用：该网站为alanhovorka.com

d3.csv("https://docs.google.com/spreadsheets/d/12jMwpmqdbUUfcMHWg2GwGvu-d9BhaJOEsWjK1eoqHRc/pub?output=csv", function(error, data) {
    d3.select("#requests").selectAll('h1').data(data).append("h1").style("color", "#387284").text(function(d) {
        return d.rqt_count;
    });
    d3.select("#agencies").selectAll('h1').data(data).append("h1").style("color", "#387284").text(function(d) {
        return d.agency_cnt;
    });
    d3.select("#records").selectAll('h1').data(data).append("h1").style("color", "#387284").text(function(d) {
        return d.records_obt_cnt;
    });
    d3.select("#pages").selectAll('h1').data(data).append("h1").style("color", "#387284").text(function(d) {
        return d.pg_cnt;
    });
});

谢谢！

Answer 1

我对CORS的了解有限，但似乎这是最简单的解决方案。

不是。您无法控制Google的服务器，因此您无法将这些标头添加到响应中。

您需要使用代理或get the data through the API代替。

D3 Google Sheet Access-Control-Allow-Origin错误

1 个答案: