Access to XMLHttpRequest at 'http://localhost:5000/user/login' from origin 'http://127.0.0.1:5173' 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:5173' that is not equal to the supplied origin.
^ | | |
That is the error i get, am i just crazy or is telling me that the header has a value that is actually the same as the supplied origin?
Here is my App.ts code and thanks in advance to anyone who takes the time to read this.
import express from "express";
import { config } from "dotenv";
import morgan from "morgan";
import appRouter from "./routes/index.js"
import cors from "cors";
import cookieParser from "cookie-parser";
config();
const app = express();
// Middlewares
app.use(cors({ origin: "http://localhost:5173", credentials: true }));
app.disable("x-powered-by");
app.use(express.json());
app.use(cookieParser(process.env.COOKIE_SECRET));
// Remove it in production
app.use(morgan("dev"));
app.use("/api/v1", appRouter);
export default app;
Tried
app.use(cors())
const corsOptions ={
origin:'http://localhost:5173',
credentials:true,
optionSuccessStatus:200
}
app.use(cors(corsOptions));
"proxy": "http://localhost:5173"
app.use(cors({ origin: FRONTEND_URL, credentials: true, methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], allowedHeaders: ['Content-Type', 'Authorization'], preflightContinue: false, optionsSuccessStatus: 204 }));
Your origin is apparently http://127.0.0.1:5173, not http://localhost:5173
localhost and 127.0.0.1 may point to the same server, but they are not identical origins. Just be consistent (or allow both) and the error should go away.
Hosts can have many different names. Each name is a new origin and potentially could serve a different website.