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.
**BACKEND: ** https://shiftmate-backend.onrender.com
**FRONTEND: ** https://shiftmate-frontend.vercel.app/
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";
dotenv.config();
// Express app
const app = Express();
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'https://shiftmate-frontend.vercel.app');
res.setHeader('Access-Control-Allow-Methods', '*');
res.setHeader('Access-Control-Allow-Headers', '*');
res.setHeader('Access-Control-Allow-Credentials', 'true');
next();
});
// Use cookies
app.use(cookieParser());
// Allow for request body to be accessed
app.use(Express.json());
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);
mongoose.connect(process.env.MONGO_URI!)
.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) => {
console.log(error.message);
});
and here is the request in my frontend:
async function onSubmit(values: z.infer<typeof formSchema>) {
setLoading(true);
const {email, password} = values;
console.log(email, password)
const response = await fetch('https://shiftmate-backend.onrender.com/api/business/login/', {
method: 'POST',
body: JSON.stringify({email, password}),
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': 'https://shiftmate-backend.onrender.com/'
},
credentials: "include"
});
const json = await response.json();
if (!response.ok) {
toast({
className: "absolute top-0 right-0",
variant: "destructive",
title: "Uh oh! Something went wrong.",
description: json.error,
});
form.reset();
}
if (response.ok) {
toast({
className: "absolute top-0 right-0",
variant: "success",
title: "Successfully logged in!",
description: json.message,
});
form.reset();
router.push('/app/home');
}
setLoading(false);
}
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 