网站集成Google Calendar添加事件时遇OAuth2跨域错误

我之前在做类似的Google Calendar集成时也碰到过这个问题，这个报错本质是浏览器的同源策略在起作用：你的网站域名（xxxxxxx）和Google OAuth授权页面的域名属于不同源，代码里的InAppBrowserProxy.js尝试去访问跨域的frame，直接被浏览器拦截了。下面是几个针对性的解决方案：

1. 检查OAuth客户端的回调URI配置 #

首先要确保你在Google Cloud Console里的OAuth 2.0客户端ID配置正确：

• 登录Google Cloud Console，找到你的项目和对应的OAuth客户端ID
• 在「已获授权的重定向URI」里，添加你网站的回调地址（必须完全匹配，包括http/https、端口号，如果是本地开发也要准确填写）
• 如果你用的是InAppBrowser（比如Cordova/PhoneGap这类环境），要配置符合插件要求的自定义scheme回调，比如yourapp://oauth-callback，同时把这个地址也加到Google Console的重定向URI列表里

2. 改用弹出式授权窗口而非内嵌Frame #

Google官方的gapi.auth2库支持弹出式授权，这样可以避开跨域Frame访问的问题：

// 初始化gapi时指定ux_mode为popup
gapi.auth2.init({
  client_id: '你的客户端ID',
  ux_mode: 'popup', // 关键：用弹出窗口替代内嵌或跳转
  redirect_uri: '你的回调URI'
}).then(function(authInstance) {
  // 触发登录
  authInstance.signIn().then(function() {
    // 登录成功后调用Calendar API
    loadCalendarApiAndAddEvent();
  });
});

3. 正确处理InAppBrowser的授权流程（如果用了这个插件） #

如果你是通过InAppBrowser打开Google授权页面，不要尝试去操作它内部的Frame，而是通过监听页面加载事件来捕获回调：

// 打开授权页面
const authWindow = window.open(
  'https://accounts.google.com/o/oauth2/v2/auth?' + new URLSearchParams({
    client_id: '你的客户端ID',
    redirect_uri: '你的回调URI',
    response_type: 'code',
    scope: 'https://www.googleapis.com/auth/calendar.events'
  }),
  '_blank',
  'location=yes'
);

// 监听页面加载事件，捕获回调
authWindow.addEventListener('loadstart', function(event) {
  if (event.url.startsWith('你的回调URI')) {
    // 从url中提取授权code
    const code = new URL(event.url).searchParams.get('code');
    // 关闭授权窗口
    authWindow.close();
    // 用code去换取access token，再调用Calendar API
    exchangeCodeForToken(code).then(loadCalendarApiAndAddEvent);
  }
});

4. 避免直接操作跨域Frame #

记住：Google的OAuth授权页面是严格遵循同源策略的，你永远无法直接访问它内部的DOM或Frame内容。所有的授权交互都必须通过官方提供的API、回调URI或者页面跳转来完成，不要尝试绕过这个限制。

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