本地MERN应用调用Google Calendar API遭遇CORS错误求助

问题背景 #

开发MERN栈日历应用，需同步多名员工的Google日历排班。本地Node直接运行Google Calendar API测试代码正常，但前端点击配置按钮请求后端授权路由时，触发CORS报错：

Access to fetch at '<生成的oauth2地址>' (redirected from 'http://localhost:3500/api/auth/<邮箱>') from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

已尝试操作：

• 排除前端直接调用API方案（存在安全风险）
• 配置Express CORS允许http://localhost:3000，其余接口正常工作
• 测试http-proxy-middleware和package.json代理，均无效
• 服务器日志显示请求来源始终为localhost:3000

问题根源 #

后端授权路由直接重定向到Google的OAuth2地址，而Google的服务器不会为你的本地前端域名(http://localhost:3000)配置Access-Control-Allow-Origin头，浏览器会拦截跨域的重定向请求，导致CORS错误。

解决方案 #

核心思路：后端生成授权URL后返回给前端，由前端直接跳转至Google授权页，绕开CORS限制。

1. 调整后端授权路由 #

不再直接重定向，将生成的Google授权URL以JSON格式返回：

const { google } = require('googleapis');
const express = require('express');
const router = express.Router();

router.get('/:email', async (req, res) => {
  const { email } = req.params;
  const oauth2Client = new google.auth.OAuth2(
    process.env.GOOGLE_CLIENT_ID,
    process.env.GOOGLE_CLIENT_SECRET,
    process.env.GOOGLE_REDIRECT_URI // 需在Google Cloud控制台配置，例如：http://localhost:3500/api/auth/callback
  );

  const authUrl = oauth2Client.generateAuthUrl({
    access_type: 'offline', // 获取离线凭证，支持后续后台同步
    scope: ['https://www.googleapis.com/auth/calendar'], // 日历读写权限
    login_hint: email, // 预填充员工邮箱，简化授权流程
  });

  res.json({ authUrl }); // 返回授权URL给前端
});

module.exports = router;

2. 修改前端请求逻辑 #

通过fetch获取后端返回的授权URL，然后直接跳转：

const handleAuthorize = async (employeeEmail) => {
  try {
    const response = await fetch(`http://localhost:3500/api/auth/${employeeEmail}`);
    const { authUrl } = await response.json();
    window.location.href = authUrl; // 前端直接跳转到Google授权页面
  } catch (error) {
    console.error('获取授权地址失败:', error);
  }
};

3. 处理Google授权回调 #

用户完成授权后，Google会重定向到你配置的回调地址，后端在此路由中兑换授权码为凭证并存库：

router.get('/callback', async (req, res) => {
  const { code } = req.query;
  const oauth2Client = new google.auth.OAuth2(
    process.env.GOOGLE_CLIENT_ID,
    process.env.GOOGLE_CLIENT_SECRET,
    process.env.GOOGLE_REDIRECT_URI
  );

  try {
    const { tokens } = await oauth2Client.getToken(code);
    // 将tokens与员工邮箱关联，存入数据库（示例）
    // await EmployeeModel.updateOne({ email: 关联邮箱 }, { $set: { googleTokens: tokens } });
    
    // 授权完成后重定向回前端管理页面
    res.redirect('http://localhost:3000/schedule-management');
  } catch (error) {
    console.error('兑换授权凭证失败:', error);
    res.redirect('http://localhost:3000/authorization-error');
  }
});

关键注意事项 #

• 确保Google Cloud控制台中已正确配置授权重定向URI，需与后端GOOGLE_REDIRECT_URI完全一致，包含本地开发地址
• 后端CORS配置需保留credentials: true，确保前端与后端的正常通信
• 所有OAuth凭证的处理必须在后端完成，切勿在前端暴露Google客户端密钥

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