部署在Firebase Cloud Functions的Express服务器开启CORS遇问题求助

1. 显式配置CORS允许的来源 #

默认的cors()未限制来源范围，可能被浏览器拦截。建议直接指定Next.js开发/生产环境的域名：

app.use(cors({
  origin: ['http://localhost:3000', 'https://your-production-nextjs-domain.com'],
  credentials: true // 若请求携带Cookie、认证头需开启此项
}));

如果需要适配更多场景，可使用动态判断逻辑：

app.use(cors({
  origin: (origin, callback) => {
    const allowedOrigins = ['http://localhost:3000', 'https://your-production-nextjs-domain.com'];
    // 允许无origin的请求（如Postman这类工具）
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  credentials: true
}));

2. 确认Axios请求的目标地址 #

你的请求代码axios.get('/plaid/link-token')若未配置baseURL，会默认请求Next.js自身服务器，而非Firebase函数地址。需确保请求指向正确的函数路径：

// 方式1：全局配置Axios baseURL
axios.defaults.baseURL = 'https://your-firebase-function-url/api';
// 之后可简化请求
await axios.get('/plaid/link-token');

// 方式2：直接使用完整请求路径
await axios.get('https://your-firebase-function-url/api/plaid/link-token');

注：你的Express服务挂载了/api前缀，完整请求路径必须包含该前缀。

3. 适配Firebase Functions v2的内置CORS配置 #

Firebase Functions v2的onRequest自带CORS配置，若与Express的cors中间件冲突可能引发问题。可尝试仅使用Firebase的配置：

const api = onRequest({
  cors: {
    origin: ['http://localhost:3000', 'https://your-production-nextjs-domain.com'],
    methods: ['GET', 'POST', 'OPTIONS'],
    allowedHeaders: ['Content-Type']
  }
}, app);

此时可移除Express中的app.use(cors())，避免重复设置响应头。

4. 处理OPTIONS预请求 #

若请求携带自定义头（如Authorization），浏览器会先发送OPTIONS预请求。上述CORS配置已包含methods: ['OPTIONS']，可确保服务器正确响应预请求。

5. 验证部署与缓存 #

• 执行firebase deploy --only functions确保修改后的代码已部署生效；
• 使用浏览器无痕模式测试，避免旧CORS响应头缓存导致的问题。

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