GASでWebアプリ実現するときにGET通信でハマったこと

背景

GoogleAppsScript(GAS)を使用して在庫管理のWebアプリを作ります。
以下のようにGoogleサービスで構成を組むことで、お金をかけずにWebアプリを組んでしまおうと考えてます。

Google Site <-----> GAS <---> Googleスプレッドシート

ハマったこと

GASへのGETが通らずCORSエラーが発生する。
（POSTも同様と思います）

結論

• GASのdoGet関数内にエラーがないか確認。
• アクセスできるユーザーを「全員」にしてデプロイする。

詳細

Javascript(jQuery)からGASへGETで通信を試みるが、
CORSエラーが出続けているのでサーバー(GAS)からのAccess-Control-Allow-Origin設定が悪いのか？！とヘッダ付与方法をずっと探していました。

Developer Console

Access to XMLHttpRequest at 'https://script.google.com/macros/s/xxxxxxxxxxxxxx/dev?func=allget' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ハマりポイント1

CORSエラーはCORSエラーではなかった。

要は、GASのdoGet関数内でエラーが発生する状況になっていました。
以下コードでcreateTextOutputにsetHeadersをメソッドチェーンで繋げていますが、こんな関数は存在しません（）
ここでエラーし、失敗の返却ヘッダにAccess-Control-Allow-OriginがないことでブラウザではCORSエラーとして認識したようです。詳細は[1]の記事を参考ください。

doGet

function doGet(request) {
  let func = request.parameter.func;
  //中略
  return ContentService.createTextOutput(JSON.stringify(result))
    .setMimeType(ContentService.MimeType.JSON)
    .setHeaders({'Access-Control-Allow-Origin': '*'});
}

ハマりポイント2

「デプロイをテスト」は外部から呼び出せない
GASを他ドメインからWEBアプリとして実行するには以下画像のようにデプロイ時にアクセスできるユーザーを「全員」にする必要があります。URLの末尾は「デプロイをテスト」では/devですが、デプロイでは/execです。

参考

[1] https://www.bugbugnow.net/2019/06/gasweb.html
[2] https://zenn.dev/iwatos/books/752824c25d84fc4e1d2f/viewer/make-debug-settings