Error: Access to XMLHttpRequest at ‘https://api-git-hotfix-cors-projects.vercel.app/master/view?batch_type=master’ from origin ‘http://localhost:3031’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.
vercel.json
{
"version": 2,
"builds": [{ "src": "server.js", "use": "@vercel/node" }],
"rewrites": [{ "source": "/(.*)", "destination": "/server.js" }],
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "Access-Control-Allow-Credentials", "value": "true" },
{ "key": "Access-Control-Allow-Origin", "value": "*" },
{ "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
{
"key": "Access-Control-Allow-Headers",
"value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
}
]
}
]
}
server.js
// load environment variables
const dotenv = require('dotenv');
const path = require('path');
// Load environment variables based on NODE_ENV
dotenv.config({ path: path.resolve(__dirname, .env.${process.env.NODE_ENV}) });
const app = require('./app');
app.get('/', (req, res) => res.send('Express on Vercel'));
console.log(process.env.DB_NAME, process.env.DB_USER, process.env.DB_PORT);
// Check if NODE_ENV is set to "production" or "staging" to determine if it's running on Vercel
if (process.env.NODE_ENV === 'local') {
// Start server locally
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log(Server is running on port ${PORT});
});
}
module.exports = app;
app.js
// app.js
const express = require('express');
const cors = require('cors');
const productRoutes = require('./routes/products');
const vendorRoutes = require('./routes/vendors');
const masterRoutes = require('./routes/master');
const app = express();
// Custom CORS middleware to set additional headers
const customCors = (req, res, next) => {
res.setHeader('Access-Control-Allow-Credentials', true);
res.setHeader('Access-Control-Allow-Origin', '*'); // Use specific origin in production
// Another common pattern: Allow dynamic origin
// res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
res.setHeader(
'Access-Control-Allow-Headers',
'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
);
// Handle preflight request (OPTIONS)
if (req.method === 'OPTIONS') {
res.status(200).end();
return;
}
// Proceed to next middleware or route
next();
};
// Apply built-in CORS middleware (allowing all origins in this case)
app.use(cors());
// Apply custom CORS middleware for additional headers
app.use(customCors);
// Parse incoming JSON
app.use(express.json());
// Use your routes
app.use('/products', productRoutes);
app.use('/vendors', vendorRoutes);
app.use('/master', masterRoutes);
// Export the app (no need for allowCors wrapper)
module.exports = app;```
folder structure
