I have an admin panel developed with ReactJS and a mobile app developed with expo Go. I am trying to send notifications from my admin panel to the client on expo go.
Currently with the implementation below, i keep getting
Access to fetch at 'https://exp.host/--/api/v2/push/send' from origin 'http://localhost:3000' has been blocked by CORS policy
When using the Expo Push notifications tool everything is working.
How can i achieve the sending a notification from react to expo?
Here is my code:
React
const response = await fetch('https://exp.host/--/api/v2/push/send', {
method: 'POST',
// mode: 'no-cors',
headers: {
'accept': 'application/json',
'content-Type': 'application/json',
'accept-encoding': 'gzip, deflate'
},
body: JSON.stringify({
to: tokens,
title: title,
body: body,
}),
});
console.log(response)
if(response.ok){
try {
const docRef = await addDoc(collection(db, "broadcast"), {
title: title,
body:body,
tokens:tokens
});
console.log("Document written with ID: ", docRef.id);
toast.success(`broadcast ${title} sent.`, {position: "top-right",})
} catch (e) {
console.error("Error adding document: ", e);
toast.error(e, {position: "top-right",})
}
}else{
console.error("Error sending broadcast: ", response.status);
toast.error(`Error sending broadcast - ${response.status}`, {position: "top-right",})
alert(`Error sending broadcast - ${response.status}`)
}
Expo
const registerForPushNotifications = async (alertUser) => {
console.log('register for push notifications')
if (Device.isDevice) {
const { status: existingStatus } = await Notifications.getPermissionsAsync();
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
const { status } = await Notifications.requestPermissionsAsync();
finalStatus = status;
}
if (finalStatus !== 'granted') {
throw new Error('Failed to get push token for push notification!');
}
const token = await Notifications.getExpoPushTokenAsync();
const expotoken = await AsyncStorage.getItem('expopushtoken')
if(expotoken===null){
// await expoPushTokensApi.register(token.data);
try {
const docRef = await addDoc(collection(db, "expoPushToken"), {
uid: user.uid,
expopushtoken:token.data,
timestamp: serverTimestamp()
});
console.log("Document written with ID: ", docRef.id);
} catch (e) {
console.error("Error adding document: ", e);
}
console.log('expopushtoken doesnt exist',token.data)
await AsyncStorage.setItem('expopushtoken', token.data)
}else{
console.log('expopushtoken exists',expotoken);
//check to see if its saved in database
const q = query(collection(db, "expoPushToken"), where("uid", "==", user.uid));
await getDocs(q).then(async(snapshot)=>{
console.log('isEmpty',snapshot.empty);
if(snapshot.empty){
try {
const docRef = await addDoc(collection(db, "expoPushToken"), {
uid: user.uid,
expopushtoken:token.data,
timestamp: serverTimestamp()
});
console.log("Document written with ID: ", docRef.id);
} catch (e) {
console.error("Error adding document: ", e);
}
}})
}
} else {
console.warn('Must use physical device for Push Notifications');
}
};