GASにフォームデータをPOST送信したいが、CORSエラーでブロックされる

Question

実現したいこと

HTML/JavaScriptで構成されたマルチページの学力テストフォームから、GASに対してPOSTリクエストで回答データを送信し、Googleスプレッドシートに記録したいです。

発生している問題・分からないこと

フォームの「送信」ボタンを押すと、JavaScriptからfetchでGASにPOST送信しているのですが、CORSポリシーによってブロックされてしまいます。

エラーメッセージ

index.html:1 Access to fetch at 'https://script.google.com/macros/s/AKf。。。/exec' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のソースコード

async function submitToGAS(answers) {
  const form = new FormData();
  for (const key in answers) {
    form.append(key, answers[key]);
  }

  try {
    const response = await fetch('https://script.google.com/macros/s/AKf.../exec', {
      method: 'POST',
      body: form,
    });

    if (response.ok) {
      alert('送信が完了しました。ありがとうございました！');
    } else {
      const text = await response.text();
      console.error('送信失敗:', response.status, text);
    }
  } catch (error) {
    console.error('fetchエラー:', error);
  }
}

function doPost(e) {
  const sheet = SpreadsheetApp.openById('id').getSheetByName("解答データ");

  const data = [];
  for (let key in e.parameter) {
    data.push(e.parameter[key]);
  }
  sheet.appendRow(data);

  return ContentService.createTextOutput("送信成功")
    .setMimeType(ContentService.MimeType.TEXT)
    .setHeader('Access-Control-Allow-Origin', '*')
    .setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS')
    .setHeader('Access-Control-Allow-Headers', 'Content-Type');
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

.setHeader('Access-Control-Allow-Origin', '*') をGAS側で返すようにしている（が効果なし）

fetchのmode: 'no-cors' を試したが、レスポンスが取得できず response.ok が常にfalse

GASのデプロイは「ウェブアプリケーションとして公開」で「全員（匿名ユーザー含む）」にしている

Script URL の末尾が /exec であることも確認済み

補足

以下の疑問も解消したいです。
GASとJSの組み合わせでCORSを回避する正しい手順・構成が知りたいです

FormDataでのPOST送信は正しい方法でしょうか？

Access-Control-Allow-Origin ヘッダーは ContentService.createTextOutput() では無効だったりしますか？

もしかして doPost ではなく doGet で試すべきでしょうか？
以上ですよろしくお願いします。

Comments

[Lhankor_Mhy]

プリフライトは発生してないですか？

また、ドキュメントを見る限り、setHeaderというメソッドがなさそうに見えるのですが、このメソッドについて教えていただけますか？　親クラスからの継承でしょうか？
https://developers.google.com/apps-script/reference/content/text-output?hl=ja

Answer 1

formDataをやめてみてはどうでしょうか？

<input type="button" id="btn" value="btn">
<script>
btn.addEventListener('click',()=>{
  const url='・・・';
  const method='post';
  const body=new URLSearchParams({x:1,y:2});
  const headers= {
      'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
      };
  fetch(url,{method,body,headers}).then(res=>res.text()).then(console.log);
});
</script>