WebPush：授权标头中的密钥与用于订阅该用户的发送者 ID 不对应

密钥与用于订阅该用户的发送者 ID 不对应"/>

WebPush：授权标头中的密钥与用于订阅该用户的发送者 ID 不对应

我正在尝试使用 Node Express 服务器在我的 React 应用程序中实现推送通知。 我在 webPush 中使用 VAPID 密钥。 不幸的是，当我尝试发送推送通知时，出现了 403 错误

授权标头中的密钥与用于订阅此用户的发件人 ID 不对应。请确保您使用的是 来自 Firebase 控制台的正确发件人 ID 和服务器密钥

你知道如何处理那个错误，甚至是什么意思吗？ 我的密钥是通过

webpush.generateVAPIDKeys()

我没有使用过 Firebase 或其他任何东西，我有自己的服务器，所以我不想使用 Firebase（如果可以的话……）。

以下是我的部分代码：

客户

export function registerPush() {
  console.log('===registerPush===', process.env.REACT_APP_VAPID_PUBLIC_KEY)
  const convertedVapidKey = process.env.REACT_APP_VAPID_PUBLIC_KEY
    ? urlBase64ToUint8Array(process.env.REACT_APP_VAPID_PUBLIC_KEY)
    : ''
  navigator.serviceWorker.ready
    .then(function (registration) {
      return registration.pushManager
        .getSubscription()
        .then(async function (subscription) {
          if (subscription) {
            return subscription
          }
          return registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: convertedVapidKey,
          })
        })
    })
    .then(function (subscription) {
      fetch(`${process.env.REACT_APP_URL_BACK}notifications/subscribe`, {
        method: 'POST',
        body: JSON.stringify(subscription),
        headers: {
          'Content-Type': 'application/json',
        },
      })
    })
}

serviceWorker

this.addEventListener('push', function (e) {
  console.log('push', e)
  var title = e.data.text()
  e.waitUntil(this.registration.showNotification(title))
})

服务器

const webPush = require('web-push')

webPush.setVapidDetails(
  process.env.VAPID_WEB_PUSH_CONTACT,
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
)
app.post('/notifications/subscribe', (req, res) => {
 
  const subscription = req.body
  console.log(subscription)

  const payload = JSON.stringify({
    title: 'Hello!',
    body: 'It works.',
  })

  webPush
    .sendNotification(subscription, payload)
    .then((result) => {
      console.log(result)
      res.status(200).json({ success: true })
    })
    .catch((e) => {
      res.status(500).json({ success: false })
      console.log(e)
    })
})

确保您在客户端（创建子时）和服务器端的公钥匹配。您正在使用 env 值，所以他们可能会这样做。

另外，确保你有一个有效的 urlBase64ToUint8Array 函数，我有一个错误的实现，然后我的转换密钥“不对应”。