Angular ~13.1.0引入Angular Fire Performance模块时出现Firebase CORS错误

环境与依赖信息 #

• Angular版本：~13.1.0
• @angular/fire版本：^7.4.1
• 仅引入的模块/服务：AngularFireModule、AngularFirePerformanceModule、PerformanceMonitoringService

出现的错误日志 #

Access to fetch at 'https://firebaseinstallations.googleapis.com/v1/projects/<Project-Name>/installations' from origin 'http://localhost:4300' 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.

POST https://firebaseinstallations.googleapis.com/v1/projects/<Project-Name>/installations net::ERR_FAILED

TypeError: Failed to fetch
    at zone.js:1518:1
    at proto.<computed> (zone.js:973:1)
    at InstrumentHooks.js:97:51
    at index.esm2017.js:174:53
    at index.esm2017.js:119:26
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at asyncToGenerator.js:32:1
    at new ZoneAwarePromise (zone.js:1429:1)

核心诉求 #

仅需使用上述三个模块，不打算启用Firebase的其他功能模块。

已尝试但无效的解决方案 #

• 调整Firebase Storage的CORS配置
• 为Firebase Storage添加CORS响应头
• 移除其他npm依赖包排查冲突问题

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