Google App Script Web 应用程序 GET 和 POST 请求被 CORS 策略阻止

问题描述 投票:0回答:4

我创建了一个 Google Web 脚本应用程序,它将用户的姓名和电子邮件添加到电子表格中。当直接在浏览器中访问网页时,此方法工作正常,但来自网站的 GET 和 POST 请求都会返回错误“Access to fetch at 'https://script.google.com/macros/s/AKfycbxkG5hM6MMswwHdzWSJKwutMYsOZRT3zjC7jFti0sDvJ47bWB4BTsHPhvbyEVGSsSc5/exec ' from origin '' 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头 如果不透明响应满足您的需求,请将请求的模式设置为“no-cors”。在禁用 CORS 的情况下获取资源。”

我不一定需要 POST 请求的响应,但使用“no-cors”实际上并不更新电子表格(我进行了测试以确保它在网站之外工作)

我使用了 XMLHttpRequest 和 fetch 方法,同时使用了 GET 和 POST 请求,并更改了各种设置以尝试使其正常工作,但到目前为止还没有成功。

我尝试修改 Google Apps 脚本项目中的设置(设置为以我的身份执行,任何人都可以匿名访问)和清单(这里不多,文档参考)。

我查看了这些堆栈溢出帖子以尝试提供帮助,但他们的解决方案对我不起作用(任何解决方案都不完全适用于我的情况)

应用程序脚本在尝试发送 POST 请求时发送 405 响应

Google Apps 脚本跨域请求停止工作

这是我的获取方法(最近的尝试)

fetch("https://script.google.com/macros/s/AKfycbxkG5hM6MMswwHdzWSJKwutMYsOZRT3zjC7jFti0sDvJ47bWB4BTsHPhvbyEVGSsSc5/exec", {
    method: 'POST',
    data: data,
    mode: 'cors',
    credentials: 'include', // include, *same-origin, omit
    redirect: 'follow',
    headers: {
        'Content-Type': 'text/plain;charset=utf-8',
    }
}).then(response => {
    console.log("success:", response);
});

现在服务器应该返回一个表示“成功”的字符串,但我却收到了我之前提到的错误。

编辑 我忘记在 Google 应用程序脚本中包含 doGet 和 doPost 方法:


var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

function doPost (e){
  if(!e) return ContentService.createTextOutput("No e");
  if(!e.parameters) return ContentService.createTextOutput("No params");
  if(!e.parameters.email) return ContentService.createTextOutput("No email");
  if(!e.parameters.name) return ContentService.createTextOutput("No name");
  if(!emailRegex.test(e.parameters.email)) return ContentService.createTextOutput("Wrong email format"); // if the email is not in proper format, return

  return addToDoc(e.parameters);
}

function doGet (e){

  if(!e) return ContentService.createTextOutput("No e");
  if(!e.parameters) return ContentService.createTextOutput("No params");
  if(!e.parameters.email) return ContentService.createTextOutput("No email");
  if(!e.parameters.name) return ContentService.createTextOutput("No name");
  if(!emailRegex.test(e.parameters.email)) return ContentService.createTextOutput("Wrong email format"); // if the email is not in proper format, return

  return addToDoc(e.parameters);
}

function addToDoc (params){
  var email = params.email;
  var name = params.name;

  var sheet = SpreadsheetApp.openById("1X0sUNSFcv-phGbGy7jeo9K5WLEX5cxyh_1_X6kSPjPs").getSheets()[0];

  var dataRange = sheet.getDataRange();
  var values = dataRange.getValues();

  // If we already have the email in the system, return
  for(var x = 0; x < values.length; x++){
    for(var y = 0; y < values[x].length; y++){
      if(values[x][y].indexOf(email) > -1) return ContentService.createTextOutput("Already have email");
    }
  }

  // Gets current row index and updates
  var scriptProps = PropertiesService.getScriptProperties();
  var nextDataIndex = parseInt(scriptProps.getProperty("NEXT_DATA_INDEX"));
  scriptProps.setProperty("NEXT_DATA_INDEX", ""+(nextDataIndex+1));

  var insertRange = sheet.getRange(nextDataIndex, 1, 1, 2);
  insertRange.setValues([[name, email]]);

  return ContentService.createTextOutput("Success");
}

解决方案

结果我的 doPost 请求失败了(doGet 正在工作),因为我使用的是

e.parameters
而不是
e.postData
。当我收到错误消息时,我认为这是我的网站的问题,而不是网络应用程序的问题。

谢谢田池!我会花一辈子的时间来修复这个网站

javascript post google-apps-script
4个回答
10
投票

虽然我从你的问题中不确定你的Google Apps Script of Web Apps,但是这个修改怎么样?

修改要点:

  1. 我认为您的 Web 应用程序可能不返回任何值。您可以将

    return ContentService.createTextOutput()
    放入
    doPost()
    doGet()
    的函数中。这样,在 Google Apps 脚本中,就会返回状态 200。

    function doPost(e) { // or doGet(e)
    
      // do something
    
      return ContentService.createTextOutput(); // Please add this.
    }
    
  2. 您可以修改客户端脚本如下:

    fetch("https://script.google.com/macros/s/AKfycbxkG5hM6MMswwHdzWSJKwutMYsOZRT3zjC7jFti0sDvJ47bWB4BTsHPhvbyEVGSsSc5/exec", {
        method: 'POST',
        body: data,
        headers: {
            'Content-Type': 'text/plain;charset=utf-8',
        }
    }).then(response => {
        console.log("success:", response);
    }).catch(err => {
        console.log("Error:" + err);
    });
    

注:

  • 当您修改Web Apps的Google Apps脚本时,请将Web Apps部署为新版本。这样,最新的脚本就会反映到Web Apps中。请小心这一点。

参考资料:

如果我误解了您的问题并且这不是您想要的结果,我深表歉意。


3
投票

只有以下对我有用:

在 Google Apps 脚本中

function doPost(e) {
  return ContentService.createTextOutput(JSON.stringify({status: "success"})).setMimeType(ContentService.MimeType.JSON);
}

在 JavaScript 中

fetch(URL, {
      redirect: "follow",
      method: "POST",
      body: JSON.stringify(DATA),
      headers: {
        "Content-Type": "text/plain;charset=utf-8",
      },
    })

2
投票

我必须将访问权限从只有我自己更改为任何人。


0
投票

您可以在 html 中尝试此方法(将数据写入 url 查询):

var query = new URLSearchParams(data).toString();    
fetch(`your-appscript-url?${query}`, {
  method: 'POST',
  headers: {
    "Content-Type": "text/plain;charset=utf-8",
  },
})
© www.soinside.com 2019 - 2024. All rights reserved.