Google Calendar API导出后报错，点击创建按钮触发异常求助

核心问题分析 #

Codepen上运行正常但本地出错，主要是以下几个原因：

• OAuth 2.0授权域名未配置：Codepen属于Google信任的默认授权域名，而本地localhost或自定义域名未被添加到OAuth客户端的授权列表，导致授权失败。
• 代码语法疏漏：createEvent方法里的this.callStack.args = event缺少分号，可能引发JS解析错误。
• API加载时机问题：本地环境下Google API脚本加载速度可能慢于自定义脚本执行，导致gapi对象未定义。

解决步骤 #

1. 配置OAuth 2.0授权来源 #

登录Google Cloud控制台，找到代码中clientId对应的项目：

• 进入「API和服务」→「凭据」，找到目标OAuth客户端ID
• 在「已获授权的JavaScript来源」中添加本地服务器地址，比如http://localhost:8080、http://127.0.0.1:5500（根据你本地运行的端口调整）
• 保存配置后等待5-10分钟让设置生效

2. 修复代码语法错误 #

在createEvent方法中补充分号：

this.callStack.args = event; // 原代码此处缺少分号

3. 确保API加载完成后再初始化 #

修改window.load事件逻辑，等待gapi加载完成后再初始化日历实例：

window.addEventListener("load", function() {
  const waitForGapi = setInterval(() => {
    if (typeof gapi !== 'undefined') {
      clearInterval(waitForGapi);
      // 初始化逻辑放在这里
    }
  }, 100);
});

4. 用HTTP服务器运行本地代码 #

不能直接用file://协议打开HTML文件，必须通过HTTP服务器运行：

• Python：python -m http.server 8080
• Node.js：npx http-server -p 5500
• VS Code：使用Live Server插件

修改后的完整代码 #

HTML #

<script src="https://apis.google.com/js/api.js" id="calendarScript"></script>
<input
 type="button"
 value="Create Calendar Event"
 onclick="addCalendarEvent()"
/>
<script src="script.js"></script>

JavaScript #

function addCalendarEvent() {
  var event = {
    summary: "Google I/O 2015",
    location: "800 Howard St., San Francisco, CA 94103",
    description: "A chance to hear more about Google's developer products.",
    start: {
      dateTime: "2020-01-28T09:00:00-07:00",
      timeZone: "America/Los_Angeles"
    },
    end: {
      dateTime: "2020-01-28T17:00:00-07:00",
      timeZone: "America/Los_Angeles"
    },
    recurrence: ["RRULE:FREQ=DAILY;COUNT=2"],
    attendees: [{ email: "example@example.com" }],
    reminders: {
      useDefault: false,
      overrides: [
        { method: "email", minutes: 24 * 60 },
        { method: "popup", minutes: 10 }
      ]
    }
  };
  window.googleCalendar.createEvent(event);
}

window.addEventListener("load", function() {
  const waitForGapi = setInterval(() => {
    if (typeof gapi !== 'undefined') {
      clearInterval(waitForGapi);
      let credentials = {
        scope: "https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/calendar.events",
        clientId: "755605534058-mvo5t4ut6di8jj57t37uoohkppi7qrg7.apps.googleusercontent.com",
        apiKey: "AIzaSyBK8Eo16V2bQYTYCP0ClJNKNOw7T308j44",
        discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"]
      };
      window.googleCalendar = new googleCalendar(credentials);
    }
  }, 100);
});

class googleCalendar {
  constructor(credentials) {
    this.gapi = gapi;
    this.gapi.load("client:auth2", init.bind(this));
    let cal = this;
    this.callStack = {};
    function init() {
      this.gapi.client
        .init({
          apiKey: credentials.apiKey,
          clientId: credentials.clientId,
          scope: credentials.scope,
          discoveryDocs: credentials.discoveryDocs
        })
        .then(function() {
          cal.gapi.auth2.getAuthInstance().isSignedIn.listen(updateCallstack);
          function updateCallstack() {
            if (cal.callStack.func) {
              cal.callStack.func(cal.callStack.args);
              cal.callStack = {}; // 执行后清空调用栈，避免重复触发
            }
          }
        });
    }
  }
  userAuthStatus() {
    const authInstance = this.gapi.auth2.getAuthInstance();
    if (!authInstance.isSignedIn.get()) {
      authInstance.signIn();
      return false;
    }
    return true;
  }
  createEvent(event) {
    if (this.userAuthStatus()) {
      let request = this.gapi.client.calendar.events.insert({
        calendarId: "primary",
        resource: event
      });
      request.execute(function(e) {
        alert("done");
        console.log(e);
      });
    } else {
      this.callStack.func = this.createEvent.bind(this);
      this.callStack.args = event;
    }
  }
}

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