Home Google sheets web app blocked by CORS when trying to send a get request on the front-end

Questions

Google sheets web app blocked by CORS when trying to send a get request on the front-end

November 4, 2022

I’m trying to make a google web app, but when I to send a get request, it gives me an error saying "_ has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
Javascript (front-end only):

fetch("https://script.google.com/macros/s/.../exec", {
    method: "GET",
    headers: {
        "Content-Type": "application/json"
    }
}).then(response => {
    console.log(response);
});

App Script:

function doGet(e) {
    // get spreadsheet
    const ss = SpreadsheetApp.getActiveSpreadsheet();
    const sheet = ss.getSheetByName('DataCollection');
    const max = sheet.getRange("F1").getValue();

    // get data and sort by amount
    const data = [];
    for (let i = 1; i <= max; i++) {data.push({name: sheet.getRange("B" + i).getValue(), data: sheet.getRange("A" + i).getValue()});}
    data.sort((a, b) => (a.data > b.data) && -1 || 1);
    return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(ContentService.MimeType.JSON);
}

Currently, the deployment of the web app is set to execute as myself and anyone has access, and my webpage is static.

The web app works perfectly fine when I tested the code, but CORS blocks the request when I send it through my webpage. I’ve tried multiple solutions that worked for other people, but I kept getting the same result.

Solutions I’ve tried:

jQuery.ajax({
    crossDomain: true,
    url: "https://script.google.com/macros/s/.../exec",
    method: "GET",
    dataType: "jsonp",
    success: response => console.log(response)
});

I tried adding redirect: "follow" to the fetch which did nothing
I tried adding mode: "no-cors" to the fetch which returned an empty response

>Solution :

Modification points:

I thought that in your Javascript, no request header is required to be used, because of the GET method. And, I thought that this might be the reason for your issue.
And, in order to retrieve the values from your Web Apps as a JSON object, how about modifying .then(response => {console.log(response);}) to then(res => res.json()).then(res => console.log(res))?
And, when I saw your Google Apps Script, I thought that the process cost will become high because getValue() is used in a loop.

When these points are reflected in your script, how about the following modification?

Modified script:

Google Apps Script side:

function doGet(e) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('DataCollection');
  const max = sheet.getRange("F1").getValue();
  const data = sheet.getRange("A1:B" + sheet.getLastRow()).getValues().splice(0, max).map(([data, name]) => ({ name, data }));
  data.sort((a, b) => (a.data > b.data) && -1 || 1);
  return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(ContentService.MimeType.JSON);
}

In your script, it seems that the event object e is not used.

Javascript side:

fetch("https://script.google.com/macros/s/###/exec") // Please set your Web Apps URL.
.then(res => res.json())
.then(res => console.log(res));

Note:

When I tested your showing script, I confirmed the same issue related to CORS. And, when my proposed script is used, I confirmed that the issue was removed.
When you modified the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.
You can see the detail of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".
By the way, from your Javascript, in this case, it supposes that your Web Apps is deployed as "Execute as: Me" and "Who has access to the app: Anyone". Please be caraful about this.