Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – CORS issue with express.js

I am using express js in my backend file where i have set the cors policy. But after deploy the backed file in vercel i am unable to Get data in my client side. It gives a cors error the errors are

Access to XMLHttpRequest at 'https://richter-restaurant-server-alzami12-al-zamis-projects.vercel.app/reviews' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am also having an error

Access to XMLHttpRequest at 'https://richter-restaurant-server-alzami12-al-zamis-projects.vercel.app/jwt' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

this is the code

app.use(cors({
    origin: 'http://localhost:5173'
}));

these are the dependencies of my projects

 "dependencies": {
    "@stripe/agent-toolkit": "^0.2.0",
    "cors": "^2.8.5",
    "dotenv": "^16.4.7",
    "express": "^4.21.2",
    "firebase-admin": "^13.0.1",
    "form-data": "^4.0.1",
    "jsonwebtoken": "^9.0.2",
    "mailgun.js": "^10.2.4",
    "mongodb": "^6.12.0",
    "nodemailer": "^6.9.16",
    "stripe": "^17.5.0",
    "uuid": "^11.0.3"
  }

I have comment out all the console.log and client.connect in the server code. I am saving the jwt token in the localstorage

This is the image of the error

i tried given credentials: true in backend and withCredentials true in frontend but it did not work

Tags:

2

Answers


  1. 0

    I don’t know this cors module but you normally don’t nee it, you can and need to set headers fitting the origin of the request to allow CORS on it.

    app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', req.header('origin') || req.headers.origin || '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PATCH, PUT, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', 'true');

    next();
})

    Anyway, as the requests are not coming from localhost:5173 but from a regular domain, I think this is where your setup needs to be updated and should use the domain(s) to trust as value, but as I said, I don’t know this module.

    It may also be vercel not allowing localhost.

    Login or Signup to reply.
  2. 0

    The URL you provided leads to a login-locked vercel deployment environment. I believe that, instead of ending up on your backend service, your localhost website only stumbles upon the vercel login page, which obviously doesn’t allow CrossOrigins.

    Deployment Protection safeguards both your preview and production URLs across
    various environments. Configured at the project level through your
    settings, Deployment Protection provides detailed access control for
    different deployment types.

    Vercel offers the following Deployment Protection features:

    • Vercel Authentication: Restricts access to your deployments to only Vercel users with suitable access rights. Vercel Authentication is available
      on all plans
    • Password Protection: Restricts access to your deployments
      to only users with the correct password. Password Protection is
      available on the Enterprise plan, or as a paid add-on for Pro plans
    • Trusted IPs: Restricts access to your deployments to only users with
      the correct IP address. Trusted IPs is available on the Enterprise plan

    Source: Vercel’s Deployment protection

    You will need to disable that protection, or find a way to bypass or authenticate your local environment to the vercel deployment preview, before you can access it. Vercel wrote a page on it, you can have a read here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search