I’m working on a MERN stack app where users can add, update, delete, and fetch tasks. The backend is set up using Express, and the frontend is built using React. All routes work fine when tested using Hoppscotch (or Postman). However, the POST request to add a task does not work from the frontend, even though update, delete, and other operations work perfectly. I hosted backend in render and frontend in vercel.

const app = express();

const corsOptions = {
  origin: ";,
  methods: ["GET", "POST", "PUT", "DELETE", "PATCH"],
  credentials: true,
};

app.use(cors(corsOptions));

app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use(
  "/tasks",
  (req, res, next) => {
    let userID = req.cookies.userID;
    if (!userID) {
      userID = uuidv4();
      res.cookie("userID", userID, {
        httpOnly: false,
        maxAge: 5 * 24 * 60 * 60 * 1000,
        sameSite: "none",
        secure: true,
      });
    }
    next();
  },
  taskRoutes
);

connectDB();

module.exports = app;

I also modified CORS settings, still not working. Why does the POST request work from Hoppscotch but fail from the frontend? Could this be related to CORS, cookies, or how the request is being made? Any guidance would be greatly appreciated!

These are the images of post, get request from hoppscotch and put,delete,patch request from frontend.

enter image description here enter image description here enter image description here

enter image description here SET-COOKIES not showing from get request in frontend

HEADER

access-control-allow-credentials:  true 
access-control-allow-origin:   
alt-svc:  h3=":443"; ma=86400 
cf-cache-status:  DYNAMIC 
cf-ray:  90476141fd6847b8-BOM 
content-encoding:  br 
content-length:  261 
content-type:  application/json; charset=utf-8 
date:  Sun, 19 Jan 2025 14:05:29 GMT 
etag:  W/ "273-TcZ4w0lpDjLAUMVoCDj+Jmi/oqQ" 
priority:  u=1,i 
rndr-id:  6a14a3d6-4ebc-468c 
server:  cloudflare 
server-timing:  cfExtPri 
vary:  Origin, Accept-Encoding 
x-powered-by:  Express 
x-render-origin-server:  Render