Novu•10mo ago

API Cors Error

I run it with postman successfully, but when I run it with react I get a cors error.

12 Replies

@korayaggul Our API is configured to be used from server side envrironment. As you are using in react which is client side, it is giving cors error. checkout API overview docs https://docs.novu.co/api-reference/overview You can use any of our backend sdk as well https://docs.novu.co/quickstarts/overview https://docs.novu.co/sdks/introduction#server-side

korayaggulOP•10mo ago

ahh thank you, So, how can I see the content of the message I received here?

   <NovuProvider
        subscriberId={user.id.toString()}
        applicationIdentifier={"appId"}
        initialFetchingStrategy={{
          fetchNotifications: true,
        }}
      >
     <PopoverNotificationCenter
          colorScheme="dark"
        >
          {({ unseenCount }) => <Notification unseenCount={unseenCount}/>}
        </PopoverNotificationCenter>
          {outlet}
      </NovuProvider>

   <NovuProvider
        subscriberId={user.id.toString()}
        applicationIdentifier={"appId"}
        initialFetchingStrategy={{
          fetchNotifications: true,
        }}
      >
     <PopoverNotificationCenter
          colorScheme="dark"
        >
          {({ unseenCount }) => <Notification unseenCount={unseenCount}/>}
        </PopoverNotificationCenter>
          {outlet}
      </NovuProvider>

Is there anything else besides unseenCount?

Pawan Jain•10mo ago

I see you are using PopoverNotificationCenter, so when you clicks on the bell, notification center component will show all messages You don't need to explicitly mention message like unseenCount

korayaggulOP•10mo ago

I want to write it in a special way and it will appear directly as a pop up, but I need the content of the notification I receive.

Pawan Jain•10mo ago

Wait we have something for this usecase I am sharing doc link in a moment https://docs.novu.co/notification-center/client/react/get-started#realtime-sockets

korayaggulOP•10mo ago

import { useSocket } from "@novu/notification-center";
import React, { useEffect, useState } from "react";
import { BiBell } from "react-icons/bi";

const Notification = ({ unseenCount }: any) => {
    const { socket } = useSocket();

    useEffect(() => {
        if (socket) {
          socket.on("notification_received", (data) => {
            console.log(data);
    console.log("zxcunseenCount",data)

          });
        }
    
        return () => {
          if (socket) {
            socket.off("notification_received");
          }
        };
      }, [socket]);
  return (
   <div>
    <div style={{color:"white"}}>{unseenCount}</div>
</div>
  );
};


export default Notification;

import { useSocket } from "@novu/notification-center";
import React, { useEffect, useState } from "react";
import { BiBell } from "react-icons/bi";

const Notification = ({ unseenCount }: any) => {
    const { socket } = useSocket();

    useEffect(() => {
        if (socket) {
          socket.on("notification_received", (data) => {
            console.log(data);
    console.log("zxcunseenCount",data)

          });
        }
    
        return () => {
          if (socket) {
            socket.off("notification_received");
          }
        };
      }, [socket]);
  return (
   <div>
    <div style={{color:"white"}}>{unseenCount}</div>
</div>
  );
};


export default Notification;

is this correct ?

Pawan Jain•10mo ago

https://docs.novu.co/notification-center/client/react/get-started#toast-notification

korayaggulOP•10mo ago

thank you ❤️

Pawan Jain•10mo ago

Yes this should work. Are you facing any issue?

korayaggulOP•10mo ago

No, I asked just to be sure, it works, thank you

Novu_Bot•10mo ago

@korayaggul, you just advanced to level 1!

Gaming

Programming

API Cors Error