简单的谷歌脚本电子邮件应用程序-来自Javascript的POST请求失败

Question

我正试图在我的网站上创建一个简单的表单，该表单将接受用户名、电子邮件和简短消息，并将其发送到谷歌应用程序脚本，然后该脚本将向我发送他们的消息。在我的谷歌应用程序脚本上，我一直处于失败状态。我尝试过使用Logger.log((进行调试，但当我尝试检查时，云日志上从未出现任何内容。这是我的Javascript中的前端代码：

const url = "https://script.google.com/macros/s/AKfycbyedfmVexnnu9oTATVADIbe5oYQbrDpmNWGLcrtSpKtFBZWA9RgnugohF9mLCHeGJc4/exec"
const data = {
name: $emailName.val(),
email: $emailEmail.val(),
message: $emailMessage.val()
}
// const payload = JSON.stringify(data)
const options = {
method: 'POST',
mode: "no-cors",
contentType: 'application/json',
payload: JSON.stringify(data)
}
console.log(options)
fetch(url, options)
.then((response) => {
console.log("success", response);
}).catch((error) => {
console.log(error)
})

})

})
.catch((error) => {
console.log(error);
})

这是我的谷歌脚本：

function doPost(e) {
Logger.log(e);
var reply = JSON.parse(e.parameters.email);
var name = JSON.parse(e.parameters.name);
var message = JSON.parse(e.parameters.message);
newMessage = "You have a new email from " + name + ", and you can reply back to them at email " + reply + ". Message below. nnnn" + message;
object = {
to: "************",
replyTo: reply,
subject: "New Message from " + name,
body: newMessage
};
MailApp.sendEmail(object);
return ContentService.createTextOutput(JSON.stringify(e.parameter));

}

任何诊断这个问题的帮助都会非常有帮助，我已经排除了几个小时的故障，还没有找到解决方案。非常感谢。

解决方案

前端：

const url = "https://script.google.com/macros/s/******/exec"
const data = {
name: $emailName.val(),
email: $emailEmail.val(),
message: $emailMessage.val()
}
const options = {
method: 'POST',
body: JSON.stringify(data),
}
console.log(options)
fetch(url, options)
.then((response) => response.text())
.then((response) => console.log(response))
.catch((error) => console.log(error))

})

谷歌脚本：

function doPost(e) {
var {name, email, message} = JSON.parse(e.postData.contents);
var reply = email;
newMessage = "You have a new email from " + name + ", and you can reply back to them at email " + reply + ". Message below. nnnn" + message;
object = {
to: "*****",
replyTo: reply,
subject: "New Message from " + name,
body: newMessage
};
MailApp.sendEmail(object);
return ContentService.createTextOutput(object);
}

请确保在执行此操作时刷新浏览器。我的头撞在墙上好几个小时了，当我刷新浏览器时，它不知怎么接受了一切。谢谢Tanaike！

Answer 1

修改点：

• 在Javascript方面，
  • 在fetch，请将数据设置为body，而不是payload
  • contentType没有属性
  • 在这种情况下，不需要使用mode: "no-cors"
• 在你的谷歌应用程序脚本端，
  • 在这种情况下，可以从e.postData.contents检索body中的值

当以上几点反映到您的脚本中时，它变成如下。

修改的脚本：

Javascript端：

const url = "https://script.google.com/macros/s/###/exec"
const data = {
name: $emailName.val(),
email: $emailEmail.val(),
message: $emailMessage.val()
}
const options = {
method: 'POST',
body: JSON.stringify(data),
}
console.log(options)
fetch(url, options)
.then((response) => response.text())
.then((response) => console.log(response))
.catch((error) => console.log(error))

谷歌应用程序脚本端：

function doPost(e) {
var {name, email, message} = JSON.parse(e.postData.contents);
var reply = email;
newMessage = "You have a new email from " + name + ", and you can reply back to them at email " + reply + ". Message below. nnnn" + message;
object = {
to: "[e-mail]",
replyTo: reply,
subject: "New Message from " + name,
body: newMessage
};
MailApp.sendEmail(object);
return ContentService.createTextOutput(JSON.stringify(e));
}

注：

• 当您修改Web应用程序的谷歌应用程序脚本时，请将部署修改为新版本。这样，修改后的脚本就会反映到Web应用程序中。请小心
• 你可以在"；在不改变用于新IDE的Web应用程序的URL的情况下重新部署Web应用程序">

参考文献：

• 使用Fetch
• 通过各种语言请求Web应用程序的示例脚本
• Web应用程序的请求参数
• 使用Google应用程序脚本利用Web应用程序