Access-Control-Allow-Origin driving me insane, help

Hi guys im new to developing web apps, im currently working on my web app, ive been developing locally and I wanted it to deploy it.

So I have a backend written in express and the frontend in nextjs.


my backend is up and running, ive sent api requests using postman and it works just fine, ive also tried connecting to the backend while I hosted my frontend locally on my PC and it connected to the backend.

I deployed my frontend to vercel

now on my login page: FRONTEND_URL/auth/login (I can only post 2 links per post)

I can’t login, when it tried to make the api request I get Origin FRONTEND_URL is not allowed by Access-Control-Allow-Origin. Status code: 204

Fetch API cannot load BACKEND_URL/api/business/login/ due to access control checks.

picture of the error:

this is my server.ts in my express backend.

import Express from "express";
import dotenv  from "dotenv"
import cors from 'cors';
import cookieParser from 'cookie-parser';
import mongoose from "mongoose";
import businessRouter from "./routes/businessRoute";
import employeeRouter from "./routes/employeeRoute";
import weekRouter from "./routes/weekRoute";
import shiftRouter from "./routes/shiftRoute";
import profileRouter from "./routes/profileRoute";

// Express app
const app = Express();

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '');
    res.setHeader('Access-Control-Allow-Methods', '*');
    res.setHeader('Access-Control-Allow-Headers', '*');
    res.setHeader('Access-Control-Allow-Credentials', 'true');

// Use cookies

// Allow for request body to be accessed

app.use((req, res, next) => {
    const accessToken = req.cookies.access_token ? '\x1b[32mTrue\x1b[0m' : '\x1b[31mFalse\x1b[0m';
    console.log(`\x1b[1m\x1b[37m[${new Date().toLocaleTimeString([], {hour12: false, hourCycle: 'h23'})}] \x1b[1m\x1b[33m[Server] [Debug]\x1b[0m - Path: ${req.path} - Method: ${req.method} - Body: ${JSON.stringify(req.body)} - Access Token: ${accessToken}`);
    next(); // this has to be called

// route handlers
app.use('/api/business', businessRouter);
app.use('/api/employee', employeeRouter);
app.use('/api/week', weekRouter);
app.use('/api/shift', shiftRouter);
app.use('/api/profile', profileRouter);

    .then(() => {
        console.log('\x1b[1m\x1b[33m[Server]\x1b[0m Connected to the database!');
        app.listen(process.env.PORT, () => {
            console.log(`\x1b[1m\x1b[33m[Server]\x1b[0m Listening on port:\x1b[1m\x1b[33m ${process.env.PORT} \x1b[0m`);
    .catch((error: Error) => {

and here is the request in my frontend:

async function onSubmit(values: z.infer<typeof formSchema>) {


        const {email, password} = values;

        console.log(email, password)

        const response = await fetch('', {
            method: 'POST',
            body: JSON.stringify({email, password}),
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '' 
            credentials: "include"

        const json = await response.json();

        if (!response.ok) {
                className: "absolute top-0 right-0",
                variant: "destructive",
                title: "Uh oh! Something went wrong.",
                description: json.error,

        if (response.ok) {
                className: "absolute top-0 right-0",
                variant: "success",
                title: "Successfully logged in!",
                description: json.message,


ive been googling, reading forums, trying solutions other people have said worked for them, and I still keep getting the same error, and its driving me crazy, been at this for a few hours now with no success, any help would be greatly appreciated :slight_smile:

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.