AngularFire预览通道连接已部署Cloud Functions遇CORS问题求解

方案一：通过Hosting预览通道Rewrite规则规避跨域 #

通过配置Firebase Hosting的转发规则，让预览通道的请求通过Hosting代理到自有域名的函数，从根源避免跨域问题：

• 编辑项目根目录的firebase.json，在hosting节点下添加rewrite规则：

{
  "hosting": {
    "rewrites": [
      {
        "source": "/api/**", // 前端调用函数的路径前缀
        "destination": "https://your-custom-domain.com/api/**" // 自有域名的函数地址前缀
      }
    ]
  }
}

• 重新部署预览通道：

firebase hosting:channel:deploy [你的通道名称]

• 前端调用函数时改用相对路径（比如/api/your-function-name），请求会自动通过Hosting转发，消除跨域限制。

方案二：在Cloud Functions中显式配置CORS允许预览通道域名 #

针对onCall函数，手动添加CORS响应头，明确允许预览通道的域名访问：

1. 若未安装cors库，先执行安装：

npm install cors

2. 在函数代码中引入并配置：

const cors = require('cors')({ origin: true });
const functions = require('firebase-functions');

exports.yourFunction = functions.https.onCall((data, context) => {
  return new Promise((resolve, reject) => {
    // 先通过cors处理跨域预检请求
    cors(context.rawRequest, context.rawResponse, () => {
      // 你的业务逻辑代码
      resolve({ result: '处理完成' });
    });
  });
});

或者直接手动设置响应头（更灵活控制允许的域名）：

const functions = require('firebase-functions');

exports.yourFunction = functions.https.onCall((data, context) => {
  // 替换为你的预览通道实际域名
  const previewOrigin = 'https://your-preview-channel-url.firebaseapp.com';
  context.rawResponse.setHeader('Access-Control-Allow-Origin', previewOrigin);
  // 业务逻辑
  return { result: '处理完成' };
});

3. 重新部署函数：

firebase deploy --only functions

方案三：动态允许可信Origin（推荐生产环境使用） #

动态检查请求来源，仅允许包括预览通道在内的可信域名访问，兼顾安全性与灵活性：

const functions = require('firebase-functions');

exports.yourFunction = functions.https.onCall((data, context) => {
  const allowedOrigins = [
    'https://your-custom-domain.com', // 自有域名
    'https://your-preview-channel-url.firebaseapp.com', // 预览通道域名
    // 可添加其他需要允许的预览通道或可信域名
  ];
  const requestOrigin = context.rawRequest.headers.origin;
  
  if (allowedOrigins.includes(requestOrigin)) {
    context.rawResponse.setHeader('Access-Control-Allow-Origin', requestOrigin);
  }
  
  // 业务逻辑
  return { result: '处理完成' };
});

注意事项 #

• 预览通道域名格式通常为https://[通道名]-[项目ID].firebaseapp.com，可在部署后从Firebase控制台获取。
• 生产环境禁止使用*作为允许的Origin，必须指定具体可信域名，避免安全风险。
• 使用Rewrite方案时，确保前端调用函数的路径与配置的source规则完全匹配。

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