React+TypeScript项目：不借助sheet.best用Axios向Google Sheets传数据

我是React和TypeScript新手，本周刚入门。正在制作一个表单，希望提交时将数据发送至Google Sheets。之前参考教程用Axios结合sheet.best把Google Sheets转为REST API，但这个方案不太理想。想请教：能不能不借助sheet.best，仍用Axios向Google Sheets提交数据？最佳替代方案是什么？我试过Google Sheets API但未成功，附上我的代码：

"use client";
import axios from 'axios';
import './waitlist.css';
import { Button } from 'semantic-ui-react';
import React, { useState } from 'react';
import { Modal } from 'antd';

const JoinWaitList = () => {
  const [fname, setFName] = useState("");
  const [lname, setLName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [sms, setSMS] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleFNameChange = event => {
    setFName(event.target.value)
  };
  const handleLNameChange = event => {
    setLName(event.target.value)
  };
  const handleEmailChange = event => {
    setEmail(event.target.value)
  };
  const handlePhoneChange = event => {
    setPhone(event.target.value)
  };
  const handleSMSChange = event => {
    setSMS(event.target.checked)
  };

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleSubmit = event => {
    event.preventDefault();

    const objt = {fname, lname, email, phone, sms };

    console.log(
      `\n
      First Name: ${fname} \n
      Last Name: ${lname} \n
      Email Address: ${email} \n
      Phone Number: ${phone} \n
      SMS Promotions: ${sms}
      `
    )
    
    // 原来用sheet.best的请求
    axios.post('https://sheet.best/api/sheets/762ac4d1-2113-4f9f-bfa7-881a21b0db4e', 
      objt
    )
    .then(response => {
      console.log(response);
      
      setFName('');
      setLName('');
      setEmail('');
      setPhone('');
      setSMS(false);
      showModal();
    })
    .catch(error => {
      console.error(error);
    });
  };
}

最佳替代方案：用Google Apps Script搭建自定义接口 #

这是无需第三方服务的最优方案，完全避开Google Sheets API的复杂权限问题，步骤如下：

1. 打开目标Google Sheet，点击顶部「扩展程序」→「Apps Script」
2. 删除默认代码，替换为以下脚本（可根据你的表单字段调整）：

function doPost(e) {
  // 获取当前Sheet
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  // 解析前端传来的JSON数据
  const data = JSON.parse(e.postData.contents);
  // 按顺序写入Sheet（和你的表单字段对应）
  sheet.appendRow([data.fname, data.lname, data.email, data.phone, data.sms]);
  // 返回成功响应
  return ContentService.createTextOutput(JSON.stringify({status: "success"}))
    .setMimeType(ContentService.MimeType.JSON);
}

3. 部署Web应用：点击「部署」→「新部署」，选择「类型」为「Web应用」，设置：
   • 执行：我
   • 谁可以访问：任何人（甚至匿名）
   • 点击「部署」，复制生成的Web应用URL（注意不是脚本编辑器的URL）

修改你的React组件中的Axios请求 #

把原来指向sheet.best的请求替换为Google Apps Script的URL，同时设置正确的请求头：

// 替换handleSubmit中的axios.post部分
axios.post('你的Google Apps Script Web应用URL', objt, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log(response);
  // 原有清空表单和弹窗逻辑保持不变
  setFName('');
  setLName('');
  setEmail('');
  setPhone('');
  setSMS(false);
  showModal();
})
.catch(error => {
  console.error(error);
});

常见问题排查 #

• 之前用Google Sheets API失败，主要是因为前端直接调用需要OAuth2认证，配置复杂且容易跨域，Apps Script方案完全规避了这个问题
• 部署Web应用时必须选择「任何人（甚至匿名）」，否则前端请求会被权限拦截
• 确保Sheet的表头和你appendRow的字段顺序一致，比如第一行设为「FirstName, LastName, Email, Phone, SMSOptIn」

内容的提问来源于stack exchange，提问作者lazysince87