Cloud Functions CORS错误：Firebase+Ionic环境下预检请求未通过校验

我之前在做Firebase云函数和前端对接时，也踩过一模一样的CORS坑！结合你提到的和官方授权端点示例的情况，大概率是这几个细节没处理到位，你可以逐一排查：

1. 确保CORS中间件的正确配置 #

很多人只写了app.use(cors);但没传关键配置参数，尤其是涉及到认证的场景，必须明确允许凭证和指定合法来源：

// 先正确初始化cors
const cors = require('cors')({
  origin: true, // 开发阶段可以用true自动匹配请求源，生产环境建议替换成你的Ionic应用域名（比如"https://yourapp.ionicapp.com"）
  credentials: true // 允许携带凭证（比如Cookie、Auth Token）
});

// 如果是用Express构建的云函数app，要把cors中间件放在所有路由定义之前
const app = express();
app.use(cors); // 这里要用上面初始化好的cors实例，不是直接用cors()

// 如果是单个云函数（非Express路由），要手动用cors包裹逻辑
exports.yourAuthorizedFunc = functions.https.onRequest((req, res) => {
  cors(req, res, () => {
    // 你的业务逻辑，比如验证用户身份、处理请求
    res.status(200).send('Success');
  });
});

2. 检查前端请求的凭证配置 #

如果云函数开启了credentials: true，Ionic的HttpClient请求必须对应开启withCredentials，否则会触发预请求校验失败：

import { HttpClient } from '@angular/common/http';

// 在你的服务/组件里
constructor(private http: HttpClient) {}

callCloudFunction() {
  const funcUrl = 'https://your-project-region.cloudfunctions.net/yourFunc';
  this.http.post(funcUrl, { data: 'test' }, { withCredentials: true })
    .subscribe(response => {
      console.log('Response:', response);
    }, error => {
      console.error('Error:', error);
    });
}

3. 避免手动拦截OPTIONS预请求 #

CORS库会自动处理OPTIONS类型的预请求，但如果你在Express路由里手动定义了OPTIONS请求的处理逻辑，可能会和cors中间件冲突，导致预请求的响应头不完整。确保没有类似这样的代码：

// 不要手动写这个！cors库会自动处理
app.options('*', (req, res) => {
  res.sendStatus(200);
});

4. 部署后等待生效（重要！） #

Firebase Cloud Functions部署后，有时候需要3-5分钟才能完全生效，缓存的旧配置可能导致CORS头没有正确返回。如果刚部署完就测试，建议等几分钟再试，或者重新部署一次确保配置更新。

最后排查点 #

如果以上都没问题，检查你的云函数是否在处理请求时提前返回了响应（比如在cors中间件逻辑完成之前就调用了res.send()），这会导致CORS头没有被正确添加到响应里。

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