Web App 在 POST 请求中执行 302 状态的 respods

Question

我从 Chrome 扩展向部署为 Web 应用的 GAS 发出 POST 请求。 Chrome 扩展脚本是：

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;
    }

Web App 获取请求，对其进行处理并返回 JSON 响应：

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

虽然 Chrome 扩展没有返回 respose 正文。 Chrome 在 DevTools->Network->Response 中给出错误“无法加载响应数据”。以下是请求和响应标头：

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==

这看起来像是 CORS 的问题（标头或谷歌服务器返回不透明的响应等）。

Answer 1

在这种情况下，我建议修改如下。

修改点：

• 根据我使用fetch 使用doPost 的Web 应用程序的经验，我了解到可以使用以下简单脚本。 Ref

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

• 在这种情况下，当使用headers时，我确认发生了与CORS相关的错误。而且，在 Web Apps 中，doPost(e) 中的 e.postData.contents 似乎在有和没有这个标头时是一样的。

从上面的脚本来看，当你的脚本被修改后，变成如下。

修改脚本：

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();

• 我可以确认，当使用这个修改后的脚本时，请求doPost不会出错。

注意：

• 在此修改中，假设return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON); 的response 具有该值。当 Google Apps 脚本出现错误时，上述修改后的脚本不起作用。所以请注意这一点。

• 我想一开始是为了确认上面的脚本是否可以使用，比如我推荐使用下面这个简单的示例脚本。

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

• 当您修改了 Web Apps 的 Google Apps 脚本时，请将 Web Apps 重新部署为新版本。这样，最新的脚本就会反映到 Web 应用程序中。另外，请注意这一点。

参考资料：

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