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

Question

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

XMLHttpRequest cannot load https://docs.google.com/spreadsheets/d/12jMwpmqdbUUfcMHWg2GwGvu-d9BhaJOEsWjK1eoqHRc/pub?output=csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://alanhovorka.com' is therefore not allowed access.

我已经阅读了此处的一些答案，但它们似乎并没有直接解决 D3 从以 CSV 形式发布到网络的 Google 表格中提取数据的情况。关于 CORS 是否适用于 D3 以及我是否需要使用桌面，我看到了不同的 react 。我对 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

My knowledgeof CORS is limited, but it seems like it would be the simplest the solution.

事实并非如此。您无法控制 Google 的服务器，因此无法将这些 header 添加到响应中。

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