CORS Issue on Render – Missing Access-Control-Allow-Origin header on preflight OPTIONS request

1

Hello,

I’m experiencing a CORS problem with my Express backend deployed on Render.

My backend uses the following CORS setup:

js

import express from 'express';
import cors from 'cors';

const app = express();

const allowedOrigins = [
  'https://allo-tracteur.vercel.app',
  'http://localhost:5173',
];

const corsOptions = {
  origin: function (origin, callback) {
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Origin not allowed'));
    }
  },
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
};

app.use(cors(corsOptions));
app.options('*', cors(corsOptions));

app.use(express.json());

// API routes here
app.use('/api/payment', paymentRouter);
// ...

app.listen(process.env.PORT || 5000, () => {
  console.log('Server running');
});

From my frontend hosted at https://allo-tracteur.vercel.app, I make a POST request to /api/payment/initiate with credentials: 'include'.

However, the preflight OPTIONS request fails because the response does not include the Access-Control-Allow-Origin header, causing this error:

Access to fetch at 'https://allo-tracteur-backend.onrender.com/api/payment/initiate' from origin 'https://allo-tracteur.vercel.app' 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 configuration works fine locally. I suspect that Render’s proxy might be modifying or stripping CORS headers.

Could you please confirm if Render modifies CORS headers?
Is there any recommended configuration on Render to allow CORS headers properly for authenticated requests?

Thanks in advance for your help!

1 Like