CORSエラーが解決しない

Question

実現したいこと

HTMLで入力したデータ(inputやradio)をGASに送信してスプレッドシートに書き込みたいです。

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

JavascriptからGASに送信するときに以下のエラーコードが発生します

エラーメッセージ

Access to fetch at 'https://script.google.com/macros/s/AKf.../exec' from origin 'http://xxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のソースコード

document.addEventListener('DOMContentLoaded', function () {
  function collectAnswers() {
    const answers = {};

    document.querySelectorAll('#page-1 input[type="text"]').forEach((input, i) => {
      answers[`yomi${i + 1}`] = input.value.trim();
    });

    answers['jp_01'] = document.querySelector('input[name="jp"]')?.value.trim() || '';
    answers['jp_02'] = document.querySelector('input[name="jp1"]:checked')?.value || '';
    answers['choice'] = document.querySelector('input[name="choice1"]:checked')?.value || '';
    answers['jp5'] = document.querySelector('input[name="jp5"]')?.value.trim() || '';
    answers['contact'] = document.querySelector('input[name="contact1"]:checked')?.value || '';
    answers['math_01'] = document.querySelector('input[name="math_01"]:checked')?.value || '';
    answers['math_02'] = document.querySelector('input[name="math_021"]:checked')?.value || '';
    answers['math_03'] = document.querySelector('input[name="math_031"]:checked')?.value || '';
    answers['math_041'] = document.querySelector('input[name="math_041"]')?.value.trim() || '';
    answers['math_042'] = document.querySelector('input[name="math_042"]')?.value.trim() || '';
    answers['math_043'] = document.querySelector('input[name="math_043"]')?.value.trim() || '';

    return answers;
  }

  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,
        mode:"cors",
        headers: {
            'Content-Type': 'application/json'
        }
      });

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

  const hoverButton = document.querySelector('#page-4 .button[data-role="submit-button"]');
  if (hoverButton) {
    hoverButton.addEventListener('click', () => {
      const answers = collectAnswers();
      submitToGAS(answers);
    });
  } else {
    console.warn("送信ボタンが見つかりませんでした。");
  }
});

function doPost(e) {
  const sheet = SpreadsheetApp.openById('ID').getSheetByName("スプレッドシートの名前");

  sheet.appendRow([
    new Date(),
    e.parameter.yomi1,
    e.parameter.yomi2,
    e.parameter.jp_01,
    e.parameter.jp_02,
    e.parameter.choice,
    e.parameter.jp5,
    e.parameter.contact,
    e.parameter.math_01,
    e.parameter.math_02,
    e.parameter.math_03,
    e.parameter.math_041,
    e.parameter.math_042,
    e.parameter.math_043
  ]);

  return ContentService.createTextOutput("送信成功")
    .setMimeType(ContentService.MimeType.TEXT)
    .setHeader("Access-Control-Allow-Origin", "*");
}

試したこと・調べたこと

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

上記の詳細・結果

'Content-Type': 'application/json'を色々変えてみましたが、エラーの内容は変わらず、GASもコードを変更するごとに再デプロイしてアクセスできるユーザーを全員に常にしています。

補足

自分はまだ実践も未経験かつほぼ独学で進めているので、コードが分かりずらかったりすると思います。申し訳ございません。
また、ここに質問する前に調べたりchatGPTに質問していますが、解決されず...といった状態です。初心者ですが、どうかよろしくお願いします。