google-apps-script frontend cors httprequest

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

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: