Having created a script for a Google Sheet in Apps Script, I defined it as follows:
function doPost(e) {
var app = SpreadsheetApp.getActive();
var sheet = app.getSheetByName('Web');
var content = JSON.parse(e.postData.contents)
sheet.getRange("A1").setValue(content);
return ContentService.createTextOutput("Saved");
}
After implementing it as a Web Application and setting the access to Anyone, I successfully sent post requests through Postman to the generated URL without any issues. The request body content was consistently stored in the "A1" cell.
https://i.stack.imgur.com/rLrO8.png
https://i.stack.imgur.com/pfbBj.png
However, when attempting to send the exact same request using the Fetch API from my Vue.js web application, it fails with a TypeError: Failed to fetch error, providing no additional information such as status codes.
The function called on button click from my web app is as follows:
function sendForm() {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({
"test": "testing from vue"
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("https://script.google.com/macros/s/<id of the implementation>/exec", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
Even though the JavaScript code was generated by Postman itself, the issue persists. The console output shows: https://i.stack.imgur.com/2CRxm.png
I also tried using axios, but encountered a similar issue with a different error message: Network Error.
https://i.stack.imgur.com/jgSXk.png
Seeking guidance on what steps to take or where to look next, as hours of online research have not provided a solution. Any insights would be greatly appreciated.