我收到了 Web 推送错误代码状态 403，这让我很抓狂，因为它告诉我要使用 firebase。这是怎么回事？

Question

对于我正在构建的 PWA，我不断收到来自 Chrome 的 WebPush 错误（状态代码 403），并且正文说我需要使用来自“firebase 控制台”的 VAPID 服务器密钥，但我使用了节点 Web-Push 库来生成VAPID 密钥，发生了什么事？我是否必须使用 firebase 在 Chrome 中构建 PWA？

这是我发送推送通知时从浏览器收到的错误消息：

  name: 'WebPushError',
  message: 'Received unexpected response code',
  statusCode: 403,
  headers:
   { 'content-type': 'text/plain; charset=utf-8',
     'x-content-type-options': 'nosniff',
     'x-frame-options': 'SAMEORIGIN',
     'x-xss-protection': '0',
     date: 'Thu, 31 Oct 2019 19:59:02 GMT',
     'content-length': '194',
     'alt-svc':
      'quic=":443"; ma=2592000; v="46,43",h3-Q049=":443"; ma=2592000,h3-Q048=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000',
     connection: 'close' },
  body:
   'the key in the authorization header does not correspond to the sender ID used to subscribe this user. Please ensure
you are using the correct sender ID and server Key from the Firebase console.\n',
  endpoint:
   'https://fcm.googleapis.com/fcm/send/exXmW3OFOTY:APA91bEKW_vxnvOZohog34pprDH6XvBsxtfnUpBdYY7z_7q4GZGa4wrmtBBg4kTRwLtgy3lNpCs8SMlvOr4nY-Fu_4zUus6zEJh69581Ier14QZxkEEVXyZHKRaZcmHa3zmbZRB4VD7Z

这是运行我的节点服务器的代码：

//Handle imports
const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const webPush = require('web-push')
const vapidKeys = require('./vapid.json')
const path = require('path')

//Setup application
const app = express()
app.use(cors())
app.use(bodyParser.json())
app.use('/static', express.static(path.join(__dirname,'frontend')))
const port = 8080

//Set up webpush
webPush.setVapidDetails(
    'mailto: <email>',
    vapidKeys.publicKey,
    vapidKeys.privateKey
)

const pushOptions = {
    proxy: '<proxy>'
}
//setup Push Notification
const sendNotification = (subscription, dataToSend='') => {
    webPush.sendNotification(subscription, dataToSend, pushOptions).catch(error => { console.log('Damn it: ', error.message, '||', error)
    })
}

//Server Routes Defined
app.get('/', (req, res) => res.sendFile('index.html', { root: './' }))

//Setup Database Methods
const dummyDb = {subscription: null}
const saveToDatabase = async subscription => {
    dummyDb.subscription = subscription
}

//Other Server Routes
app.post('/save-subscription', async (req, res) => {
    const subscription = req.body
    await saveToDatabase(subscription)
    console.log('subscribed!')
    res.json({message: 'success'})
})

app.get('/send-notification', (req, res) => {
    const subscription = dummyDb.subscription
    const message = 'hello world'
    sendNotification(subscription, message)
    res.json({message: dummyDb.subscription})
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Answer 1

我有 Node.js Express、Postgres、Angular 8 应用程序。我遇到了同样的问题，我通过添加“gcm_sender_id”来解决它：在manifest.webmanifest文件（或manifest.json）中我还使用了firebase生成的公钥和私钥。

您的 gcm_sender_id 是您在 google cloud 中的项目 id 或 firebase 发件人 id