当我使用 JS 与 Gsheet 交互时出现 CORS 错误答案

【问题标题】：CORS error when i interact with Gsheet using JS当我使用 JS 与 Gsheet 交互时出现 CORS 错误
【发布时间】：2022-09-28 03:00:25
【问题描述】：

我对 JS 了解不多，我正在尝试将表单数据发送到 google sheet..

访问在 \'https://script.google.com/macros/s/AKfycbw87iZhw2-wfyKSV7bGFr11_XkI9D9LjrBA6doLleozwTVoWoWoJyqKX8J4-gR_Skbr_c/exec\' 从源 \'null\' 获取已被 CORS 策略阻止：否 \'Access-Control-请求的资源上存在 Allow-Origin\' 标头。如果不透明的响应满足您的需求，请将请求的模式设置为 \'no-cors\' 以获取禁用 CORS 的资源。 formGform.html:48 POST https://script.google.com/macros/s/AKfycbw87iZhw2-wfyKSV7bGFr11_XkI9D9LjrBA6doLleozwTVoWojyqKX8J4-gR_Skbr_c/exec net::ERR_FAILED 200 （匿名）@formGform.html:48 formGform.html:48 Uncaught (in promise) TypeError: Failed to fetch 在 HTMLFormElement。 (formGform.html:48:13)

这是我的 html & JS 代码

    <!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>HTML form to Google Sheet</title>
</head>
 
<body>
    <h1 id=\"msg\"></h1>
    <form>
        <input type=\"text\" name=\"name\" placeholder=\'Name\' id=\"name\"><br><br>
        <input type=\"email\" name=\"email\" placeholder=\'Email\' id=\"email\"><br><br>
        <input type=\"tel\" name=\"phone\" placeholder=\'Phone\' id=\"phone\"><br><br>
        <input type=\"submit\" id=\"sub\" >
    </form>
    <script>


        let form = document.querySelector(\"form\");
        
        form.addEventListener(\'submit\', (e) => {
           let nm=document.querySelector(\"#name\").value
           let email=document.querySelector(\"#email\").value
           let phone=document.querySelector(\"#phone\").value
           console.log(nm)
            if(nm.length == 0)
            {
                e.preventDefault();
                alert(\'wrong name\')
            }
            else if(email.length == 0)
            {
                e.preventDefault();
                alert(\'wrong email\')
            }
            else if(phone.length == 0)
            {
                e.preventDefault();
                alert(\'wrong phone\')
            }
            else{
            e.preventDefault();
            document.querySelector(\"#sub\").value = \"Submiting..\";
            let data = new FormData(form);
            fetch(\'https://script.google.com/macros/s/AKfycbw87iZhw2-wfyKSV7bGFr11_XkI9D9LjrBA6doLleozwTVoWojyqKX8J4-gR_Skbr_c/exec\', {
                    method: \"POST\",
                    body: data
                })
                .then(res => res.text())
                .then(data => {
                    document.querySelector(\"#msg\").innerHTML = data;
                    document.querySelector(\"#sub\").value = \"Submit\"
                });
            }
           
        })
    </script>
</body>
 
</html>

在谷歌表 AppScript 我写这个代码

const sheets = SpreadsheetApp.openByUrl(\"https://docs.google.com/spreadsheets/d/1fyED4wBoghr6Y6wor6h9FdU2iMhRCCb3c4tyIxKUmp4/edit#gid=0\");
const sheet = sheets.getSheetByName(\"Gformsubmit\");
function doPost(e) {
  let data = e.parameter;
  sheet.appendRow([data.name, data.email, data.phone]);
  return ContentService.createTextOutput(\"Success\");
}

标签： javascript html google-sheets-api

【解决方案1】：

当您使用doPost(e) 时，可以通过以下方式提取数据

let data = JSON.parse(e.postData.contents)

当您在 Google Apps 脚本中有任何未捕获的错误时，它会返回 400 HTTP 代码

尝试这个

const sheets = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1fyED4wBoghr6Y6wor6h9FdU2iMhRCCb3c4tyIxKUmp4/edit#gid=0");
const sheet = sheets.getSheetByName("Gformsubmit");
function doPost(e) {
  let data = JSON.parse(e.postData.contents);
  sheet.appendRow([data.name, data.email, data.phone]);
  return ContentService.createTextOutput("Success");
}

【讨论】：