Web App does respods with a 302 status on a POST request

Question

I make a POST request from Chrome extension to a GAS deployed as Web App. Chrome extension script is:

const fetchData = async (scriptURL, data) => {
        try {
            const response = await fetch(scriptURL, {
                mode: 'no-cors',
                method: 'POST',
                referrer: "",
                redirect: 'follow',
                body: JSON.stringify(data), 
                headers: {
                    'Content-Type': 'application/json',
                    'Access-Control-Allow-Origin':'*'
                }                        
            });                             
            if (response != "") var json = response.json();
            console.log('Success:', JSON.stringify(json));
        } 
        catch (e){console.log('Errors:', e.message)}       
            
        return json;
    }

The Web App gets request, processes it and returns a JSON response:

 function doPost(e){ 
          // processing
    return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON);
}

Although Chrome extension doesn't get back respose body. Chrome gives an error "Failed to load response data" in DevTools->Network->Response . Here are the request and response headers:

Request URL: https://script.google.com/macros/s/AKfycbzwUUktSYViIkE-kEc9-C73ztt6Mm14GTW9tEFezIdt/exec
Request Method: POST
Status Code: 302 
Remote Address: 173.194.220.100:443
Referrer Policy: no-referrer-when-downgrade
**Response headers**
access-control-allow-origin: *
alt-svc: h3-29=":443"; ma=2592000, h3-27=":443"; ma=2592000, h3-25=":443"; ma=2592000, h3-T050=":443"; ma=2592000, h3-Q050=":443"; ma=2592000, h3-Q046=":443"; ma=2592000, h3-Q043=":443"; ma=2592000
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-encoding: gzip
content-length: 416
content-security-policy: script-src 'report-sample' 'nonce-DROk3lWJaG4CuCxaaXZ+iQ' 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' https: http:;object-src 'none';base-uri 'self';report-uri /cspreport
content-type: text/html; charset=UTF-8
date: Mon, 06 Jul 2020 19:16:47 GMT
expires: Mon, 01 Jan 1990 00:00:00 GMT
location: https://script.googleusercontent.com/macros/echo?user_content_key=3VuZ5HCCoG5098DqNcdFBjLL5kKYEi5U0ifWB9YmhR6BwH8VqCvsX8_sSZeRVkJwP1fZuSegpbhbvW6kPGda1I-6C2vyPPLIm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnOhtPz9z4I3dzdyyINU3UA0pwpiENh8R4k1UDc5fBUkkDEzr0xNxtlsP-6Y5oFxMMg&lib=MpU1M31wDqWrblgsshTKAbKcDiPyCPu1i
pragma: no-cache
server: GSE
set-cookie: SIDCC=AJi4QfGj_nmaK5xHhkEGWyyb7dSsxg04uiw5Jp1HBnHCqmfBXd2win3dnlpVNNPsFuGVbqfUZ71m; expires=Tue, 06-Jul-2021 19:16:47 GMT; path=/; domain=.google.com; priority=high
status: 302
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
**Request Headers**
:authority: script.google.com
:method: POST
:path: /macros/s/AKfycbzwUUktSYViIkE-kEc9-C73ztt6Mm14GTW9tEFezIdt/exec
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7
content-length: 344
content-type: text/plain;charset=UTF-8
cookie: .........
origin: chrome-extension://gabejmdkdkojddbfifhcceicplhpdkmn
sec-fetch-dest: empty
sec-fetch-mode: no-cors
sec-fetch-site: none
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
x-client-data: CIe2yQEIorbJAQjBtskBCKmdygEI/rzKAQjAvcoBCOfIygEYm77KAQ==

It looks like a problem with CORS (headers, or google server returns opaque response or etc).

Answer 1

In this case, I would like to propose to modify as follows.

Modification points:

• In my experience for using Web Apps of doPost using fetch, I have understood that the following simple script can be used. Ref

    fetch(url, { method: "POST", body: JSON.stringify(obj) })
      .then((res) => {
        console.log(res.status);
        return res.text();
      })
      .then((res) => console.log(res));
  

• In this case, when headers is used, I confirmed that the error related to CORS occurs. And, at Web Apps, it seems that e.postData.contents of doPost(e) is the same with and without this headers.

From above script, when your script is modified, it becomes as follows.

Modified script:

const fetchData = async (scriptURL, data) => {
  var json;
  try {
    const response = await fetch(scriptURL, {
      method: 'POST',
      body: JSON.stringify(data),
    });
    if (response != "") json = await response.json();
    console.log('Success:', JSON.stringify(json));
  } catch (e) {
    console.log('Errors:', e.message)
  }
  return json;
}

async function main() {
  const res = await fetchData("https://script.google.com/macros/s/###/exec", {key1: "value1"});
  console.log(res);
}

main();

• I could confirm that when this modified script is used, no error occurs for requesting to doPost.

Note:

• In this modification, it supposes that response of return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON); has the value. When Google Apps Script has the errors, above modified script doesn't work. So please be careful this.

• I think that at first, in order to confirm whether the above script can be used, for example, I would like to recommend to do use the following simple sample script.

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

• When you modified the Google Apps Script of Web Apps, please redeploy the Web Apps as new version. By this, the latest script is reflected to the Web Apps. Also, please be careful this.

References:

• Web Apps
• Taking advantage of Web Apps with Google Apps Script