CORS块:WebApp POST到工作表 [英] CORS block: WebApp POST to Sheet

问题描述

由于CORS政策，我收到了一个错误消息.这似乎是一个普遍的问题.我已经阅读了其他问题并尝试了一些解决方案，但是仍然无法解决问题.

I am getting an error due to CORS policy. It seems a common issue. I have read other questions and tried some of their solutions, but it still does not work.

我的应用执行以下操作: 1-从Google表格中获取值列表，并将其显示在网络应用程序的下拉列表中(仍使用script.google.com) 2-将用户在Web应用程序的下拉列表中选择的值发布到工作表中.

My app does the following: 1- GET a list of values from a google sheet and show them in a drop down list in a web app (still using script.google.com) 2- POST the value that the user select in the drop down list from the web app to the sheet.

1(GET)运行正常，没有问题.当我添加2(POST)时，它给了我POST调用的CORS错误. GET看起来不错.

1 (GET) was working fine with no issues. When I added 2 (POST), it gave me the CORS error for the POST call. The GET seems fine.

这是POST的代码:

function doPost(e) {
  var value = JSON.parse(e.postData.contents).value;
  var ss = SpreadsheetApp.openById('1Zbvy1x_DsBlcwK4FdjoY4m0MFvS_tYZlGtKvD36fDyk');
  var sh = ss.getSheetByName('Dashboard');
  sh.getRange(92, 2).setValue(value);
  return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);
}

带有HTML文件:

<script>
function listQ() {
    const index = this.selectedIndex;
    if (index > 0) {
      const e = document.getElementById("sel1");
      const value = e.options[index].value;
      const url = "https://script.google.com/a/google.com/macros/s/AKfycbxHX7cthji076OrqfY9ZpGa7jNDxKHUMf_ib7Ekmoo0Ir5DQF1Y/exec";  
      fetch(url, {
        method: "POST",
        body: JSON.stringify({index: index, value: value}),
      })
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        console.log(data);
      })
    }
  }
document.getElementById("sel1").addEventListener("change",listQ);
</script>

GET部分很好，因此无需在此处添加代码.

The GET part is fine, so no need to add the code here.

我已尝试按照此处的建议使用PUT更改POST:

I have tried to change POST with PUT as suggested here: Change Google Sheet data based on user selection in Google Site (Web App) but it gave the same error.

我也阅读了此链接，但是我的是POST请求，而不是GET请求，我不确定如何将其应用于我的案例:

I have also read this link, but mine is a POST request, not GET and I am not sure how to apply it to my case: CORS authorization on google sheets API requests

仅供参考，CORS错误消息中的来源"是... googleusercontent.com

FYI The "origin" in the CORS error message is ...googleusercontent.com

更新:我也尝试过此操作:

UPDATE: I have also tried this: Google Apps Script cross-domain requests stopped working

我认为我应该实现该解决方案，但是当我尝试在代码中添加这些mod时，它不起作用.可能是因为我不确定100％所做的事情，所以我没有正确添加mod.我收到未定义回调函数的错误.这是我所做的:

I think I should implement that solution, but when I tried to add those mods in my code and it did not work. Probably I am adding the mods incorrectly since I am not 100% sure what I am doing. I get the error that the call back function is not defined. Here is what I did:

function doPost(e) {
  var callback = e.parameter.callback;
  var value = JSON.parse(e.postData.contents).value;
  var ss = SpreadsheetApp.openById('1ROvDcIQ8JCGvvLvCvTKIqSor530Uj9ZJv-n6hQ761XA');
  var sh = ss.getSheetByName('Dashboard');
  sh.getRange(92, 2).setValue(value);
  return ContentService.createTextOutput(callback+'('+JSON.stringify({message: "ok"})+')').setMimeType(ContentService.MimeType.JSON);
}

在HTML方面，我刚刚修改了网址:

and in HTML side, I just modified the URL:

const url = "https://script.google.com/a/google.com/macros/s/AKfycbxHX7cthji076OrqfY9ZpGa7jNDxKHUMf_ib7Ekmoo0Ir5DQF1Y/exec?offset="+offset+"&baseDate="+baseDate+"&callback=?";

推荐答案

在Apps Script Web Apps中，为了从当前项目访问服务器端功能，无需创建GET或请求到Web App URL.您只需要使用 google.script.run .

In Apps Script Web Apps, in order to access server-side functions from your current project, you don't need to make a GET or POST request to the Web App URL. You just need to use google.script.run.

在您的情况下，您可以执行以下操作:

In your exact case, you could do the following:

function listQ() {
  const index = this.selectedIndex;
  if (index > 0) {
    const e = document.getElementById("sel1");
    const value = e.options[index].value;
    const body = { index: index, value: value };
    google.script.run.withSuccessHandler(yourCallback).yourServerSideFunc(body);
  }
}

function yourCallBack(response) {
  // Whatever you want to do with the data retrieved from server-side
}

在上面的代码中，客户端功能通过google.script.run调用了名为yourServerSideFunc的服务器端功能.如果服务器端函数成功返回，则将调用回调函数(函数yourCallback)，其目的是处理从服务器返回的数据(需要回调，因为单独使用google.script.run调用的函数返回void).该回调函数接收服务器端函数返回的内容作为参数.

In the code above, the client-side function calls a server side function called yourServerSideFunc via google.script.run. If the server-side function returns successfully, a callback function is called (function yourCallback), whose purpose is to handle the data returned from the server (a callback is needed since, on its own, the function called by google.script.run returns void). This callback function receives the content returned by the server-side function as an argument.

在服务器端，无需使用doPost，因为您不会发出POST请求:

And in the server-side, no need to use doPost, since you would not be making a POST request:

function yourServerSideFunc(body) {
  var value = body["value"];
  var ss = SpreadsheetApp.openById('1Zbvy1x_DsBlcwK4FdjoY4m0MFvS_tYZlGtKvD36fDyk');
  var sh = ss.getSheetByName('Dashboard');
  sh.getRange(92, 2).setValue(value);
  return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);  
}

参考:

• HTML服务:与服务器功能进行通信
• google.script.run类(客户端API)

Reference:

• HTML Service: Communicate with Server Functions
• Class google.script.run (Client-side API)

这篇关于CORS块:WebApp POST到工作表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！