0

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');
    }
  };
kd12345
  • 689
  • 10
  • 29
  • Does this answer your question? [Problem with Post API: "has been blocked by CORS policy...."](https://stackoverflow.com/questions/56138005/problem-with-post-api-has-been-blocked-by-cors-policy) – devpolo Mar 13 '23 at 12:06
  • @devpolo i tried adding proxy to package.json and still the same error occurs – kd12345 Mar 13 '23 at 12:10

0 Answers0