skip to Main Content

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


  1. on a post request, an OPTION request is sent before the actual post request happens. Make sure to include options as a supported method

    app.use(cors({
      origin: "http://localhost:3000",
      credentials: true, // Use 'credentials' instead of 'Credential'
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'] // Allow these HTTP methods
    }));
    
    Login or Signup to reply.
  2. 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);

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search