为什么会出现此错误？

Question

大家好！这里的第一篇文章，虽然我已经潜伏了很长一段时间。基本上，我的问题是从已发布的Google表格中获取数据并将其放在使用Javascript的网站上。我已经能够在脚本标记之间使用以下代码完成此操作，其中星号中的任何内容都被实际内容替换（请注意，此代码对于不同的单元格重复多次）：

$.ajax("https://docs.google.com/spreadsheets/d/*spreadsheetId*/pub?gid=0&range=*cellId*&single=true&output=csv").done(function(result){
    document.getElementById("*id*").innerHTML = result;
});

我从这里获得了这个代码并稍微修改了一下：Getting value of a cell from google docs spreadsheet into javascript

现在，问题在于，虽然它在我自己的计算机上本地工作，但当我将其上传到我的托管服务时它不起作用（如果它有帮助，我使用Hostinger并运行最新版本Chrome，虽然它也不适用于IE）。上面链接的帖子上有人说尽管存在跨领域问题，但这应该有效，但出于某种原因，它似乎并不存在。当我检查元素并进入控制台选项卡时，有很多＆＃34; XMLHttpRequest无法加载＆＃34;错误（每次我尝试访问电子表格时都有一个错误），并且每个错误都说明如下：

https://docs.google.com/spreadsheets/d/*spreadsheetId*/pub?gid=0&range=*cellId*&single=true&output=csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://*myWebsite*' is therefore not allowed access.

在我完成帖子之前，我想补充一点，虽然我知道足够的HTML和CSS来制作网站，但我的Javascript技能目前还很缺乏。我使用过的许多Javascript都是根据其他人所说的改编而来的，我盲目地相信它们。我尝试在标题中添加一些其他脚本标记，例如：

<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

我真的不能肯定地说这些是帮助我还是只是毫无意义地坐在那里。我确实想补充一点，我已将这些放在我的标题中。

所以，我的主要问题是：

1）是否有其他人目前或过去遇到过这个问题？

2）我在做一些痛苦的事情显然是错的吗？

3）如果没有，我是否有更好的方式从已发布的Google电子表格中提取数据？

4）如果没有，是否有一些我可以添加的代码以避免Chrome中的错误？我注意到很多人说可以使用PHP标头来避免这种情况，但我不想使用它，除非它真的是唯一的选择。如果有办法使用Javascript解决错误，那将是理想的。

无论如何，非常感谢任何看到这个并花时间回答的人。我觉得这样一个菜鸟问这个问题，但过去几周我一直在搜索和关闭，我似乎找不到有效的解决方案。希望其他人也经历同样的事情，也可以从中吸取教训。或许我只是疯了。

Answer 1

为什么会出现此错误？

在浏览器中运行JavaScript时，对代码可以访问的内容有一些限制。

浏览器中的JavaScript可以通过XMLHttpRequest向其他网站发送内容请求，这是$.ajax在后台执行的操作。但是，same-origin policy下有某些限制。

根据上述链接，此政策的原因是允许JavaScript发出任意跨域请求将是一个安全问题：

假设用户正在访问银行网站但未注销。然后他去任何随机的其他网站，该网站有一些恶意的JavaScript代码在后台运行，从银行网站请求数据。由于用户仍在银行网站上登录，因此该恶意代码可以在银行网站上执行任何操作。例如，获取您上次交易的清单，创建新交易等。这是因为浏览器可以根据银行网站的域名向银行网站发送和接收会话cookie。

为避免出现这种情况，我们采用了同源策略，可以防止JavaScript向不同网站发出请求。

使用Javascript从其他网站访问数据的主要方式是，当您返回内容时，您要向其添加Access-Control-Allow-Origin标头的请求的网站。这会告诉您的浏览器，您要求的网站明确允许其他网站访问其内容。

如果工作表不允许此功能，我怀疑您需要找到不同的解决方案。

你可以尝试的事情

查看您关联的问题，请求中有key个参数。我怀疑key参数用于验证对Google API的请求，它是一个API密钥。这可能对请求至关重要，因此Google可以跟踪您的请求。 Google可能拒绝向您提供内容，因为您错过了此密钥。
对Google是否为表格提供正式的CORS API进行一些研究。
尝试一些绕过此政策的方法，例如JSONP。

基本上，此错误表示Google未提供允许您的浏览器访问其内容的标头。

Answer 2

您需要在服务器中创建一个脚本才能处理与Google文档的连接。它可以在php，python，javascript（节点）或您使用的任何服务器端语言中完成（在本例中我将使用php），您将能够为客户端响应添加de CORS标头。

所以这是我的handler.php文件：

<?php 
header("Access-Control-Allow-Origin: *");
$externalIp = file_get_contents('https://docs.google.com/spreadsheets/d/*spreadsheetId*/pub?gid=0&single=true&output=csv');
echo $externalIp;

这是我的客户档案：

<html>
<head>
    <title>My Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $.ajax("handler.php").done(function(result){
            document.getElementById("result").innerHTML = result;
        });         
    </script>
</head>
<body>
    <div id="result"></div>
</body>

使用Javascript从Google Sheet中提取数据时需要Access-Control-Allow-Origin标头？

2 个答案:

为什么会出现此错误？

你可以尝试的事情