I try fetching my data on the server bisically this signup page, I got cors policy error even I got it configure on the server

Question

I got request policy error, I need some help guys Im stuck just a beginner here! this is my frontend code using this function to fetch data in the server,

  signup: async (email, password, name) => {
    set({ isLoading: true, error: null });
    try {
      const options = {
        credentials: "include",
        method: "POST",
        headers: { "Content-Type": "aplication/json" },
        body: JSON.stringify({ email, password, name }),
      };

      const response = await fetch(`${API_URI}/signup`, options);

      if (!response.ok) {
        throw new Error("Network response was not ok");
      }

      const data = await response.json().catch((error) => {
        throw new Error("Error parsing JSON response: " + error.message);
      });
      console.log(data);
      set({ user: data.user, isAuthenticated: true, isLoading: false });
    } catch (error) {
      set({
        error: error.message || "Error signing up",
        isLoading: false,
      });
    }
  },
}));

Here is my backend configure the cors , Im using locahost for now:

import express from "express";
import { connectionDB } from "./db/connectionDB.js";
import dotenv from "dotenv";
import authRoutes from "./routes/auth.route.js";
import cookieParser from "cookie-parser";
import cors from "cors";

dotenv.config();
const app = express();
app.use(cors({ origin: "http://localhost:3000/", Credential: true }));
app.use(express.json());
app.use(cookieParser());

app.get("/", (req, res) => {
  res.send("Hellow Word1234!");
});

app.use("/api/auth", authRoutes);

connectionDB().then(() => {
  app.listen(3001, () => {
    console.log("Server is Running in Port 3000");
  });
});

signup:1 Access to fetch at 'http://localhost:3001/api/auth/signup' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000/' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.Understand this error auth.store.jsx:23 POST http://localhost:3001/api/auth/signup net::ERR_FAILED

Answer 1

Here is the error in the code provided by you. Backend code
app.use(cors({ origin: "http://localhost:3000", credentials: true }));

• You have Credential: true instead of credentials: true. CORS options are case-sensitive.

Frontend code
headers: { "Content-Type": "application/json" }

• It should be "application/json" instead of "aplication/json":

Port should be correct
const response = await fetch(http://localhost:3001/api/auth/signup, options);