javascript - 使用 API 和 JavaScript 写入工作表

问题描述

我正在使用Google API和javascript将数据写入Google Sheet。将数据附加到工作表中按预期工作。但是，基本将数据写入特定范围会给出“404”和“对 XMLHttpRequest 的访问已被 CORS 策略阻止”错误。

您好，这里是编码的第一个贡献者和初学者。我想请您帮忙解决以下问题。我已尝试按照建议发布问题，如果我遗漏了某些内容并且我的问题表述不正确，我深表歉意。

按照youtube 教程，我制作了一个工作代码，将数据附加到谷歌表格中。

function submit_form() {
    var sheetid = '...';
    var clientid = '...';
    var clientsecret = '...';
    var refreshtoken = '...';
    var accesstoken = false;
    var sheeturl = 'https://sheets.googleapis.com/v4/spreadsheets/'+sheetid+'/values/B6:append?valueInputOption=USER_ENTERED';
    var data = '{"range": "B6", "majorDimension":"ROWS", "values":[["postedText"]]}';
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://www.googleapis.com/oauth2/v4/token?client_id='+clientid+'&client_secret='+clientsecret+'&refresh_token='+refreshtoken+'&grant_type=refresh_token');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        var response = JSON.parse(xhr.responseText);
        var accesstoken = response.access_token;
        if(accesstoken) {
            var xxhr = new XMLHttpRequest();
            xxhr.open('POST', sheeturl);
            xxhr.setRequestHeader('Content-type', 'application/json');
            xxhr.setRequestHeader('Authorization', 'OAuth ' + accesstoken );
            xxhr.onload = function() {
              if(xxhr.status == 200) {
                $('#message').html('<p>Success</p>');
              } else {
                $('#message').html('<p>Fail</p>');
              }
            };
            xxhr.send(data);
        }
    };
    xhr.send();
}

但是，我的目标是将数据写入特定范围。

我遵循了API 文档，但是当我修改我的代码以写入（而不是附加）到特定范围时

var sheeturl = 'https://sheets.googleapis.com/v4/spreadsheets/'+sheetid+'/values/B6?valueInputOption=USER_ENTERED';

我得到两个错误 -

发布https://sheets.googleapis.com/ ... 404

和

从源“http://...”访问“sheets.googleapis.com/...”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头.

我已经查看了教程、API 设置/凭据和我的代码，但我找不到任何原因说明 APPEND 有效但基本写入无效的原因。

我发现了关于 Sheets API 和 CORS 的两个问题（第一个、第二个），但没有一个对我有帮助。

有谁知道为什么追加有效但基本写入无效？谢谢你。

编辑：我也尝试过使用APIs Explorer并且追加和更新，即基本写入，在通过 APIs Explorer 执行时按预期工作。

编辑 2：以下是执行代码时的浏览器响应 - Append和Write。

标签： javascriptgoogle-sheetsgoogle-apixmlhttprequest

正如对问题的评论中已经说过的那样，问题出在 POST 与 PUT 方法上。

如API 文档中所述以及作为类似问题的答案发布的JavaScript 和 XMLHttpRequest 示例中所述，在写入单个 range时应使用PUT 方法。第一个代码用于追加数据，使用POST 方法来追加数据。

因此，该问题的解决方案是在以下代码行中简单地将 POST 更改为 PUT。

xxhr.open('PUT', sheeturl);

javascript - 使用 API 和 JavaScript 写入工作表 - CORS 块

问题描述

解决方案

推荐阅读