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
2
Answers
on a post request, an OPTION request is sent before the actual post request happens. Make sure to include options as a supported method
Here is the error in the code provided by you.
Backend code
app.use(cors({ origin: "http://localhost:3000", credentials: true }));
Credential: true
instead ofcredentials: true
. CORS options are case-sensitive.Frontend code
headers: { "Content-Type": "application/json" }
"application/json"
instead of"aplication/json"
:Port should be correct
const response = await fetch(
http://localhost:3001/api/auth/signup, options);