Node.js使用web-push推送时通知源显示localhost:3000如何改为自定义域名

1. 前置环境配置（核心） #

• 你的Node应用必须部署到公网服务器，通过Nginx反向代理绑定websiteName.com，且必须配置HTTPS证书（web推送仅支持HTTPS环境，localhost为本地开发专属豁免场景）
• Ubuntu Server 18环境下Nginx参考配置如下：

server {
    listen 80;
    server_name websiteName.com;
    # 强制跳转HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name websiteName.com;
    
    # 替换为你的SSL证书路径
    ssl_certificate /path/to/ssl/fullchain.pem;
    ssl_certificate_key /path/to/ssl/privkey.pem;
    
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

2. 前端订阅上下文修正 #

所有用户必须通过https://websiteName.com访问站点，在此域名下完成Service Worker注册、推送订阅操作，通知的来源域名直接取订阅时的站点域名，本地localhost环境订阅的推送只会显示localhost来源。

3. 代码变量修正 #

将全局配置的global.domain变量值从http://localhost:3000修改为https://websiteName.com，保证通知内的图标等资源路径均使用自定义域名，避免跨域加载失败问题。

4. web-push服务端配置校验 #

初始化web-push库时，VAPID信息的联系人前缀建议使用你的域名关联邮箱，示例如下：

const webpush = require('web-push');

const vapidKeys = {
  publicKey: '你的VAPID公钥',
  privateKey: '你的VAPID私钥'
};

webpush.setVapidDetails(
  'mailto:admin@websiteName.com', // 替换为你的域名关联邮箱
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

需保证前端订阅时使用的VAPID公钥与服务端完全一致，避免推送失败。

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