Capacitor/Ionic PWA订阅FCM主题遇CORS错误，本地正常发布后失效

问题原因 #

你直接在前端通过fetch调用iid.googleapis.com的主题订阅接口，该接口的服务器未配置允许你的生产域名（https://mysite.site.com）跨域访问，浏览器出于安全策略拦截了请求。localhost环境下浏览器默认放宽CORS限制，所以本地测试正常，生产环境触发拦截。

另外注意：你在请求头里添加的Access-Control-Allow-Origin等CORS相关头是服务器端返回给浏览器的，前端请求时加这些头完全没用，属于多余配置。

解决方案 #

方案1：使用Firebase Messaging SDK内置方法（推荐）

Firebase SDK提供了专门的主题订阅方法，内部会处理通信细节，避开前端CORS限制，无需手动调用接口。

把你代码中的fetch请求替换成以下代码：

this.devices.forEach(i => {
  let topic = i.serial;
  FirebaseMessaging.subscribeToTopic(token, topic)
    .then(() => {
      alert('Fatto');
      console.log('Subscribed to "' + topic + '"');
    })
    .catch(error => {
      console.error('Error subscribing to topic:', error);
    });
});

方案2：通过后端代理请求（若必须自定义请求）

如果一定要手动调用iid.googleapis.com接口，需要通过你的后端服务做代理：

• 前端请求你自己的后端接口（比如https://mysite.site.com/api/subscribe-topic）
• 后端接口内部发起对iid.googleapis.com的请求，携带Authorization等必要头
• 后端将请求结果返回给前端

后端请求不受浏览器CORS策略限制，所以不会出现跨域问题。

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