I've been struggling with a CORS issue for weeks while working on my application. Everything works fine locally, but when I test it in production, the requests from my frontend (hosted on Vercel) to my backend (hosted on Render) are blocked by CORS.

Tech Stack: Frontend: Next.js (hosted on Vercel) Backend: Node.js/Express (hosted on Render, using JWT for access and refresh token authentication)

Problem: In production, the browser blocks the requests with the following error: Access to XMLHttpRequest at 'https://ai-pulse-backend.onrender.com/api/v1/auth/login' from origin 'https://ai-pulse-frontend.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

`Sometimes, I also see:
CORS request did not succeed. Status code: (null)

What I’ve Tried:`

Configured CORS middleware in Express using the cors package. Allowed the Vercel domain (https://ai-pulse-frontend.vercel.app) in the CORS configuration. Tested adding additional headers like Authorization and Content-Type on both frontend and backend. Ensured withCredentials: true is used on both sides for cookies. Tested API endpoints with tools like Postman (works fine). Tried adding headers on the frontend with fetch and axios.

Here is my current CORS setup in the Express backend:

import express, { Request, Response, NextFunction } from "express";
import cors from "cors";
import cookieParser from "cookie-parser";
import routes from "./routes/index";

const app = express();
const port = process.env.PORT || 8080;
 
const corsOptions = {
  origin: ["http://localhost:3000", "https://ai-pulse-frontend.vercel.app"], // Replace with your frontend URL
  credentials: true, // Allow server to accept cookies
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
  allowedHeaders: ["Content-Type", "Authorization"],
};

app.use(cors(corsOptions)); // Enable CORS
app.use(express.json()); // Parse incoming JSON requests
app.use(cookieParser()); // Parse cookies


app.use((req: Request, res: Response, next: NextFunction) => {
  const origin = req.headers.origin;
  if (origin && corsOptions.origin.includes(origin)) {
    res.header("Access-Control-Allow-Origin", origin);
  }
  res.header("Access-Control-Allow-Credentials", "true");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");

  if (req.method === "OPTIONS") {
    res.status(200).end();
    return;
  }

  next();
});


app.use(routes);

app.get("/", (req: Request, res: Response) => {
  res.status(200).send("API is running...");
});


app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Here is how I set up Axios on the frontend with withCredentials:

import axios from "axios";

const BASE_URL = "https://ai-pulse-backend.onrender.com/api/v1";

const api = axios.create({
  baseURL: BASE_URL,
  withCredentials: true,
});

export default api;

I also use zustand to manage authentication:

login: async (email: string, password: string) => {
  const response = await api.post("/auth/login", { email, password });
  const { accessToken } = response.data;
  api.defaults.headers.common["Authorization"] = `Bearer ${accessToken}`;
}

`Questions:

How do I properly configure CORS for a Next.js frontend hosted on Vercel and an Express backend hosted on Render in production?
Are there additional headers or settings needed for JWT authentication over CORS?

Any guidance or solutions would be greatly appreciated!`