Project runs locally, but doesn’t work on Vercel

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 :

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.
It also says uncaught in promiss type error: failed to fetch
But my project works locally without any problem

Here are the photos of the error and vercel logs:

Screenshot (12) Screenshot (15)

What I Have Tried :

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

Repository: Backend: https://github.com/alzamo12/car-doctor-server.git Frontend : https://github.com/alzamo12/car-doctor-client-crud.git

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!

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

https://vercel.com/guides/using-express-with-vercel

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

Vercel Staff

Hi , 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: Local API usage with CORS

Production deployment on Vercel: Production API with CORS

I'd recommend familiarizing yourself with CORS and the https://expressjs.com/en/resources/middleware/cors.html#configuration-options. 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.

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

Screenshot (16)

Vercel Staff

Hi , 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.

This topic is closed. It no longer accepts new replies.