Requests from Client is blocked by CORS Policy, no matter what configuration you set

Question

I Deployed a MERN application on Vercel, but you know requests must happen between client and API in order for website to functions, such as signup, login, etc. as an exmaple I've made a post route called get-employees:

app.get("/get-employees", (req, res) => {
    employee.getEmployees(req, res);
});

This route when called just fetches some employees objects from the database and this is tested in the development stage. Of course I have made many other routes to serve my front end.

on the client side I would be calling these routes using fetch API, for example I made a route called /signup, in my signup.js react component, and this component need to of course call /signup route in order to be able to sign up users:

const handleSignup = async (e) => {
    const user = {
        username: username.current.value,
        password: password.current.value,
    };
    await fetch("---/signup", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(user),
    });
};

As you see here, I have deployed my API on Vercel and I also made a get route that says hello just to make sure its working. All that I'm doing is sending request to /signup in order to register users, but would it be that easy? Of course not, we have something called CORS.

So I added this code to my index.js on server side in order to enable access from client:

const corsOptions = {
    origin: '---',
    credentials: true,
}
app.use(cors(corsOptions))

But that didn't work as expected from CORS, so I tried a different way:

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); // '*' allows any origin, you can restrict it to specific origins
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
    res.header(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    );
    next();
});

That didn't work either. I also tried enabling all origins and all methods and all headers but CORS refuses.

Here are the errors I get:

/employees:1  Access to fetch at '---' from origin '---' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
 
Failed to load resource: net::ERR_FAILED asyncToGenerator.js:6 
        
        
       
        
Uncaught (in promise) TypeError: Failed to fetch
at AuthContext.js:21:28
at d (regeneratorRuntime.js:44:17)
at Generator.<anonymous> (regeneratorRuntime.js:125:22)
at Generator.next (regeneratorRuntime.js:69:21)
at r (asyncToGenerator.js:3:20)
at s (asyncToGenerator.js:22:9)
at asyncToGenerator.js:27:7
at new Promise (<anonymous>)
at asyncToGenerator.js:19:12
at AuthContext.js:20:21

Answer 1

it looked like i needed to install an extension Allow CORS: Access-Control-Allow-Origin for Microsoft Edge as CORS is disabled by default