When I try to send a pwa notification on Angular with the sendNotification method of web-push, I get the following error:
Access to fetch at 'https://wns2-db5p.notify.windows.com/w/?token=BQYAAACrA0Lgie%2bFSZFyBN0VhXRiFJoCVdAvO19FGHDBPfDGascLuRGTCNhEs57P7BGoNWVFEVay9f0JOGY3HzyMAPrpf94WbH5PM6BI1hrCTFe7DLMQaJtGtlyjvgsF0QFFO30WDtinoo4cKjWyCJcvCS%2bJZjz014dvOy42deKefFklEp3jLq29DIINLCKo1DIxlQRmfljCEoRmtMXuLShaIHVG9AM1b4ZKKkXIUxx%2bzSW38UrWtgZoQkPpKM3rMRQNpQkkahXDsOruXYn8sJMLSF0kfaBvs%2by36HBSL%2fsM8K52w6fIcTA4C3%2f2ephKGSCXQrJNcUxf2sAkDDR2ghNwv8F6' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I access my site with the following link: http://127.0.0.1:8080/
Below is my code, the error happens after webpush.sendNotification:
const VAPID_PUBLIC_KEY = "BML9Py6LHPBuJqFT0vKB4jk5NCv-Jfl1O__97PkVanHqJa5uzFD-TlUzgY-enxXQCirAbMVGQJQ-gdXaFlQUtGM";
this.swPush.requestSubscription({
serverPublicKey: VAPID_PUBLIC_KEY
})
.then(sub => {
this.sub = sub;
this.sub.keys = {
"p256dh": "BML9Py6LHPBuJqFT0vKB4jk5NCv-Jfl1O__97PkVanHqJa5uzFD-TlUzgY-enxXQCirAbMVGQJQ-gdXaFlQUtGM",
"auth": "if-YFywyb4g-bFB1hO9WMw=="
};
sendNewsletter(this.sub);
})
.catch(err => console.error("Could not subscribe to notifications", err));
export function sendNewsletter(sub) {
console.log('init send')
console.log(sub);
const webpush = require('web-push');
const vapidKeys = {
"publicKey":"BML9Py6LHPBuJqFT0vKB4jk5NCv-Jfl1O__97PkVanHqJa5uzFD-TlUzgY-enxXQCirAbMVGQJQ-gdXaFlQUtGM",
"privateKey":"SZ-C6z9rBf75PvOIhVeTwyr1vmKW-2xj8LFfS3EqW8Y"
};
webpush.setVapidDetails(
'mailto:example@yourdomain.org',
vapidKeys.publicKey,
vapidKeys.privateKey
);
const allSubscriptions = [];
allSubscriptions.push(sub);
const notificationPayload = {
"notification": {
"title": "Angular News",
"body": "Newsletter Available!",
"icon": "assets/main-page-logo-small-hat.png",
"vibrate": [100, 50, 100],
"data": {
"dateOfArrival": Date.now(),
"primaryKey": 1
},
"actions": [{
"action": "explore",
"title": "Go to the site"
}]
}
};
const headers = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "Content-Type"
};
Promise.all(
allSubscriptions.map(sub =>
webpush.sendNotification(sub, JSON.stringify(notificationPayload), {'headers': headers})
)
)
.then(() => {
//res.status(200).json({message: 'Newsletter sent successfully.'});
console.log('Newsletter sent successfully.');
})
.catch(err => {
console.log("Error sending notification, reason: ", err);
//res.sendStatus(500);
});
}
