FCM JS客户端调用getToken报错：applicationServerKey无效求助

使用Firebase Cloud Messaging（FCM）实现WebPush功能，按官方文档配置JavaScript客户端后，调用getToken方法时出现错误：

Failed to execute 'subscribe' on 'PushManager': The provided applicationServerKey is not valid.

已确认以下事项：

• 反复核对VAPID密钥，使用的是Firebase控制台>项目设置>云消息传递>Web推送证书中的公钥
• 尝试过添加/移除点击触发事件、更换不同域名
• 通知权限已授予

相关代码：

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from "firebase/messaging";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "AIzaSyDAIduxCnC5T4-QoDEw1vRjnI1_1K0odeg",
    authDomain: "hudsonvillewaterpolo.firebaseapp.com",
    projectId: "hudsonvillewaterpolo",
    storageBucket: "hudsonvillewaterpolo.appspot.com",
    messagingSenderId: "351470653163",
    appId: "1:351470653163:web:1572d4340e67fe6cf9b8ae",
    measurementId: "G-Z86EW7BNVM"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

function doTheThing() {

    getToken(messaging, { vapidKey: "VAPID KEY HERE" }).then(currentToken => {
        if (currentToken) {
            // send the token to your server and update the UI if necessary
            console.log(currentToken)
        } else {
            console.log('No registration token available, request permission to generate one')
        }
    }).catch(err => {
        console.error('Error occurred while retrieving token', err);
    });
}


onMessage(messaging, (payload) => {
    console.log('Message received. ', payload);
    // ...
});

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('.site-name').addEventListener('click', doTheThing)
})

• 检查VAPID密钥格式：确保复制的公钥没有额外空格、换行或隐藏字符，直接从控制台复制后可粘贴到纯文本编辑器中验证格式，再重新复制到代码里。
• 转换密钥为Uint8Array格式：FCM部分环境下要求VAPID密钥为Uint8Array类型，可通过以下工具函数转换：

  function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding)
      .replace(/-/g, '+')
      .replace(/_/g, '/');
    const rawData = window.atob(base64);
    return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
  }
  

  调用getToken时传入转换后的密钥：

  getToken(messaging, { vapidKey: urlBase64ToUint8Array("你的VAPID公钥") })
  

• 核对Firebase配置参数：确认firebaseConfig中的messagingSenderId与控制台显示的完全一致，参数不匹配会导致密钥验证失败。
• 清理浏览器缓存与旧订阅：清除浏览器缓存，注销旧的推送订阅（可通过浏览器开发者工具>Application>Push Messaging操作），再重新测试。
• 确认HTTPS环境：Web Push要求站点运行在HTTPS环境下（localhost除外），确保测试域名使用HTTPS协议。

内容的提问来源于stack exchange，提问作者aron.duby