Project runs locally, but doesn’t work on Vercel

[alzamo12 (Al Zami)]

Hi Vercel Community

I’m encountering an issue where my application works fine locally with express.js, but it fails after i deploy the backend server on vercel.

Problem Overview :

1. After I deploy the backend server on vercel the link is accessible but when i use the link while fetching data in client site it give me cors policy error even though i have used it.
2. It also says uncaught in promiss type error: failed to fetch
3. But my project works locally without any problem

Here are the photos of the error and vercel logs:

What I Have Tried :

1. I have used the cors policy middleware in the backend server
2. set the origin of the client url ad credentials: true
3. I have also checked that the environment variables are okay.

Repository:
Backend: GitHub - alzamo12/car-doctor-server
Frontend : GitHub - alzamo12/car-doctor-client-crud

Request for Help:

Has anyone experiences a similar issue where the clinet site can fetch data locally but falls in vercel production without clear errors in the logs? any guidance or suggestions on how to resolve or debug it would be greatly appreciated.

Thank You!

[system]

If you’re having trouble deploying an Express app, this guide can help.

How to Deploy an Express.js Application to Vercel

You can also ask v0 for suggestions tailored to your own project setup.

[anshumanb (Anshuman Bhardwaj)]

Hi @alzamo12, welcome to the Vercel community.

This seems to be a CORS issue. I’m able to use express with CORS deployed on Vercel with the following code:

Backend:

require('dotenv').config();

const express = require('express');
const cors = require("cors")
const app = express();

app.use(cors({
    origin: ["http://localhost:3000", 'https://rrv7.vercel.app']
}))

app.get("/test-cors", function (req, res) {
    res.status(200).json({success: true});
})

  useEffect(() => {
    fetch("https://express-cors-five.vercel.app/test-cors")
      .then((res) => res.json())
      .then((data) => console.log({ data }));
  }, []);

Here are the results:

Locally:

Production deployment on Vercel:

I’d recommend familiarizing yourself with CORS and the Express cors middleware. Because the CORS configuration are very specific to what sort of request you are making and this is why you need to set the options specific to your use case.

I hope this was helpful.

[alzamo12 (Al Zami)]

I have used cors middleware but it did not solve my problem while it works locally. Here are the results:

[anshumanb (Anshuman Bhardwaj)]

Hi @alzamo12, can you try and recreate what I shared?

Can you also try to use the latest production deployment domain instead of a preview deployment URL?

This is not a Vercel specific issue that’s why It’d be very helpful if you read through the Express cors middleware docs.